@pocketping/widget 1.5.2 → 1.7.0

package/dist/index.js

@@ -2,8 +2,8 @@
 import { render, h as h2 } from "preact";
 
 // src/components/ChatWidget.tsx
-import { Fragment } from "preact";
-import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import { Fragment as Fragment2 } from "preact";
+import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback } from "preact/hooks";
 
 // src/components/styles.ts
 function styles(primaryColor, theme) {
@@ -24,6 +24,17 @@ function styles(primaryColor, theme) {
       color: ${colors.text};
     }
 
+    #pocketping-container,
+    #pocketping-container * {
+      box-sizing: border-box;
+    }
+
+    #pocketping-container img,
+    #pocketping-container video {
+      max-width: 100%;
+      height: auto;
+    }
+
     .pp-toggle {
       position: fixed;
       width: 56px;
@@ -148,7 +159,7 @@ function styles(primaryColor, theme) {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 16px;
+      padding: 12px 14px;
       background: ${primaryColor};
       color: white;
     }
@@ -156,24 +167,24 @@ function styles(primaryColor, theme) {
     .pp-header-info {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 10px;
     }
 
     .pp-avatar {
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
       border-radius: 50%;
       object-fit: cover;
     }
 
     .pp-header-title {
       font-weight: 600;
-      font-size: 16px;
+      font-size: 15px;
     }
 
     .pp-header-status {
-      font-size: 12px;
-      opacity: 0.9;
+      font-size: 11px;
+      opacity: 0.85;
       display: flex;
       align-items: center;
       gap: 4px;
@@ -219,10 +230,14 @@ function styles(primaryColor, theme) {
     .pp-messages {
       flex: 1;
       overflow-y: auto;
-      padding: 16px;
+      padding: 32px 12px 12px 12px;
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 3px;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+      /* Ensure proper stacking context for positioned elements */
+      position: relative;
     }
 
     .pp-welcome {
@@ -232,20 +247,110 @@ function styles(primaryColor, theme) {
       font-size: 13px;
     }
 
+    .pp-date-separator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 16px 0 12px;
+    }
+
+    .pp-date-separator span {
+      background: ${colors.bgSecondary};
+      color: ${colors.textSecondary};
+      font-size: 11px;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-weight: 500;
+    }
+
+    /* Swipe container for mobile actions */
+    .pp-message-swipe-container {
+      position: relative;
+      display: flex;
+      align-items: stretch;
+      overflow: visible;
+      touch-action: pan-y;
+    }
+
+    .pp-swipe-left {
+      justify-content: flex-end;
+    }
+
+    .pp-swipe-right {
+      justify-content: flex-start;
+    }
+
+    .pp-swipe-actions {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding-right: 8px;
+    }
+
+    .pp-swipe-left .pp-swipe-actions {
+      right: 0;
+      left: auto;
+    }
+
+    .pp-swipe-right .pp-swipe-actions {
+      left: 0;
+      right: auto;
+      padding-left: 8px;
+      padding-right: 0;
+    }
+
+    .pp-swipe-action {
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.9;
+    }
+
+    .pp-swipe-action svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .pp-swipe-reply {
+      background: ${primaryColor};
+    }
+
+    .pp-swipe-edit {
+      background: #3b82f6;
+    }
+
+    .pp-swipe-delete {
+      background: #ef4444;
+    }
+
     .pp-message {
-      max-width: 80%;
-      padding: 10px 14px;
-      border-radius: 16px;
+      max-width: 85%;
+      padding: 6px 10px;
+      border-radius: 12px;
       word-wrap: break-word;
       position: relative;
       user-select: text;
       -webkit-user-select: text;
+      font-size: 14px;
+      line-height: 1.35;
+      display: flex;
+      flex-direction: column;
+      will-change: transform;
     }
 
     /* Hover actions container - positioned above message (Slack style) */
     .pp-message-actions {
       position: absolute;
-      top: -28px;
+      top: -32px;
       display: flex;
       gap: 2px;
       background: ${colors.bg};
@@ -258,6 +363,8 @@ function styles(primaryColor, theme) {
       z-index: 10;
       /* Reset color inheritance from message */
       color: ${colors.textSecondary};
+      /* Ensure actions don't interfere with layout */
+      pointer-events: auto;
     }
 
     @keyframes pp-actions-fade-in {
@@ -331,7 +438,8 @@ function styles(primaryColor, theme) {
       align-self: flex-end;
       background: ${primaryColor};
       color: white;
-      border-bottom-right-radius: 4px;
+      border-bottom-right-radius: 3px;
+      margin-left: 32px;
     }
 
     .pp-message-operator,
@@ -339,19 +447,32 @@ function styles(primaryColor, theme) {
       align-self: flex-start;
       background: ${colors.messageBg};
       color: ${colors.text};
-      border-bottom-left-radius: 4px;
+      border-bottom-left-radius: 3px;
+      margin-right: 32px;
+    }
+
+    /* Add spacing between different senders */
+    .pp-message-visitor + .pp-message-operator,
+    .pp-message-visitor + .pp-message-ai,
+    .pp-message-operator + .pp-message-visitor,
+    .pp-message-ai + .pp-message-visitor {
+      margin-top: 8px;
     }
 
     .pp-message-content {
-      margin-bottom: 4px;
+      display: block;
+      flex: 1;
     }
 
     .pp-message-time {
-      font-size: 11px;
-      opacity: 0.7;
+      font-size: 10px;
+      opacity: 0.6;
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 3px;
+      justify-content: flex-end;
+      margin-top: 8px;
+      flex-shrink: 0;
     }
 
     .pp-ai-badge {
@@ -388,13 +509,13 @@ function styles(primaryColor, theme) {
 
     .pp-typing {
       display: flex;
-      gap: 4px;
-      padding: 14px 18px;
+      gap: 3px;
+      padding: 8px 12px;
     }
 
     .pp-typing span {
-      width: 8px;
-      height: 8px;
+      width: 6px;
+      height: 6px;
       background: ${colors.textSecondary};
       border-radius: 50%;
       animation: pp-bounce 1.4s infinite ease-in-out both;
@@ -410,14 +531,18 @@ function styles(primaryColor, theme) {
 
     .pp-input-form {
       display: flex;
-      padding: 12px;
+      padding: 10px 12px;
       gap: 8px;
       border-top: 1px solid ${colors.border};
+      align-items: center;
     }
 
     .pp-input {
       flex: 1;
-      padding: 10px 14px;
+      min-width: 0;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 16px;
       border: 1px solid ${colors.border};
       border-radius: 20px;
       background: ${colors.bg};
@@ -425,6 +550,8 @@ function styles(primaryColor, theme) {
       font-size: 14px;
       outline: none;
       transition: border-color 0.2s;
+      box-sizing: border-box;
+      margin: 0;
     }
 
     .pp-input:focus {
@@ -438,6 +565,7 @@ function styles(primaryColor, theme) {
     .pp-send-btn {
       width: 40px;
       height: 40px;
+      min-width: 40px;
       border-radius: 50%;
       background: ${primaryColor};
       color: white;
@@ -446,7 +574,18 @@ function styles(primaryColor, theme) {
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: opacity 0.2s;
+      transition: opacity 0.2s, transform 0.1s;
+      flex-shrink: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .pp-send-btn:not(:disabled):hover {
+      transform: scale(1.05);
+    }
+
+    .pp-send-btn:not(:disabled):active {
+      transform: scale(0.95);
     }
 
     .pp-send-btn:disabled {
@@ -465,6 +604,7 @@ function styles(primaryColor, theme) {
       font-size: 11px;
       color: ${colors.textSecondary};
       border-top: 1px solid ${colors.border};
+      opacity: 0.7;
     }
 
     .pp-footer a {
@@ -493,6 +633,7 @@ function styles(primaryColor, theme) {
     .pp-attach-btn {
       width: 40px;
       height: 40px;
+      min-width: 40px;
       border-radius: 50%;
       background: transparent;
       color: ${colors.textSecondary};
@@ -501,6 +642,8 @@ function styles(primaryColor, theme) {
       display: flex;
       align-items: center;
       justify-content: center;
+      margin: 0;
+      padding: 0;
       transition: color 0.2s, border-color 0.2s;
       flex-shrink: 0;
     }
@@ -621,7 +764,10 @@ function styles(primaryColor, theme) {
       display: flex;
       flex-direction: column;
       gap: 8px;
-      margin-top: 4px;
+      margin-top: 6px;
+      max-width: 100%;
+      align-items: flex-start;
+      flex-shrink: 0;
     }
 
     .pp-attachment {
@@ -632,11 +778,22 @@ function styles(primaryColor, theme) {
       overflow: hidden;
     }
 
+    .pp-attachment-image,
+    .pp-attachment-video,
+    .pp-attachment-audio {
+      width: 240px;
+      max-width: 100%;
+    }
+
     .pp-attachment-image img {
-      max-width: 200px;
+      width: 100% !important;
+      height: auto !important;
+      max-width: 240px;
       max-height: 200px;
       border-radius: 8px;
       display: block;
+      object-fit: cover !important;
+      object-position: center;
     }
 
     .pp-attachment-audio {
@@ -646,7 +803,8 @@ function styles(primaryColor, theme) {
     }
 
     .pp-attachment-audio audio {
-      width: 200px;
+      width: 240px;
+      max-width: 100%;
       height: 36px;
     }
 
@@ -656,14 +814,18 @@ function styles(primaryColor, theme) {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 200px;
+      max-width: 100%;
     }
 
     .pp-attachment-video video {
-      max-width: 200px;
-      max-height: 200px;
+      width: 100% !important;
+      height: auto !important;
+      max-width: 240px;
+      max-height: none;
       border-radius: 8px;
       display: block;
+      object-fit: contain !important;
+      object-position: center;
     }
 
     .pp-attachment-file {
@@ -1014,34 +1176,665 @@ function styles(primaryColor, theme) {
       margin-left: 4px;
       font-style: italic;
     }
+
+    /* Pre-Chat Form */
+    .pp-prechat {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 24px 20px;
+      overflow-y: auto;
+    }
+
+    .pp-prechat-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: ${colors.text};
+    }
+
+    .pp-prechat-subtitle {
+      font-size: 13px;
+      color: ${colors.textSecondary};
+      margin-bottom: 24px;
+    }
+
+    .pp-prechat-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+
+    .pp-prechat-tab {
+      flex: 1;
+      padding: 10px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      background: transparent;
+      color: ${colors.textSecondary};
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .pp-prechat-tab:hover {
+      background: ${colors.bgSecondary};
+    }
+
+    .pp-prechat-tab.active {
+      background: ${primaryColor}15;
+      border-color: ${primaryColor};
+      color: ${primaryColor};
+    }
+
+    .pp-prechat-tab svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .pp-prechat-field {
+      margin-bottom: 16px;
+    }
+
+    .pp-prechat-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: ${colors.textSecondary};
+      margin-bottom: 6px;
+    }
+
+    .pp-prechat-input {
+      width: 100%;
+      height: 44px;
+      padding: 0 14px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      background: ${colors.bg};
+      color: ${colors.text};
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.2s;
+      box-sizing: border-box;
+    }
+
+    .pp-prechat-input:focus {
+      border-color: ${primaryColor};
+    }
+
+    .pp-prechat-input::placeholder {
+      color: ${colors.textSecondary};
+    }
+
+    .pp-prechat-input.error {
+      border-color: #ef4444;
+    }
+
+    .pp-prechat-error {
+      color: #ef4444;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .pp-phone-input-wrapper {
+      display: flex;
+      gap: 8px;
+    }
+
+    .pp-country-select {
+      position: relative;
+    }
+
+    .pp-country-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      height: 44px;
+      padding: 0 10px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      background: ${colors.bg};
+      color: ${colors.text};
+      font-size: 14px;
+      cursor: pointer;
+      transition: border-color 0.2s;
+    }
+
+    .pp-country-btn:focus {
+      border-color: ${primaryColor};
+      outline: none;
+    }
+
+    .pp-country-flag {
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .pp-country-code {
+      font-size: 13px;
+      color: ${colors.textSecondary};
+    }
+
+    .pp-country-chevron {
+      width: 12px;
+      height: 12px;
+      color: ${colors.textSecondary};
+    }
+
+    .pp-country-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      width: 280px;
+      max-height: 280px;
+      overflow-y: auto;
+      background: ${colors.bg};
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 100;
+    }
+
+    .pp-country-search {
+      position: sticky;
+      top: 0;
+      padding: 8px;
+      background: ${colors.bg};
+      border-bottom: 1px solid ${colors.border};
+    }
+
+    .pp-country-search-input {
+      width: 100%;
+      height: 36px;
+      padding: 0 12px;
+      border: 1px solid ${colors.border};
+      border-radius: 6px;
+      background: ${colors.bgSecondary};
+      color: ${colors.text};
+      font-size: 13px;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    .pp-country-search-input:focus {
+      border-color: ${primaryColor};
+    }
+
+    .pp-country-list {
+      padding: 4px;
+    }
+
+    .pp-country-option {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s;
+    }
+
+    .pp-country-option:hover {
+      background: ${colors.bgSecondary};
+    }
+
+    .pp-country-option.selected {
+      background: ${primaryColor}15;
+    }
+
+    .pp-country-name {
+      flex: 1;
+      font-size: 13px;
+      color: ${colors.text};
+    }
+
+    .pp-country-dial {
+      font-size: 12px;
+      color: ${colors.textSecondary};
+    }
+
+    .pp-phone-number-input {
+      flex: 1;
+    }
+
+    .pp-prechat-submit {
+      width: 100%;
+      height: 44px;
+      margin-top: 8px;
+      border: none;
+      border-radius: 8px;
+      background: ${primaryColor};
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: opacity 0.2s, transform 0.1s;
+    }
+
+    .pp-prechat-submit:hover:not(:disabled) {
+      opacity: 0.9;
+    }
+
+    .pp-prechat-submit:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    .pp-prechat-submit:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .pp-prechat-skip {
+      width: 100%;
+      padding: 12px;
+      margin-top: 8px;
+      border: none;
+      background: transparent;
+      color: ${colors.textSecondary};
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+
+    .pp-prechat-skip:hover {
+      color: ${colors.text};
+    }
   `;
 }
 
+// src/components/PreChatForm.tsx
+import { useState, useRef, useEffect } from "preact/hooks";
+import { parsePhoneNumber, isValidPhoneNumber } from "libphonenumber-js/min";
+
+// src/data/countries.ts
+var countries = [
+  // Europe
+  { code: "FR", name: "France", dialCode: "+33", flag: "\u{1F1EB}\u{1F1F7}" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "\u{1F1E9}\u{1F1EA}" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "\u{1F1EA}\u{1F1F8}" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "\u{1F1EE}\u{1F1F9}" },
+  { code: "PT", name: "Portugal", dialCode: "+351", flag: "\u{1F1F5}\u{1F1F9}" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", flag: "\u{1F1F3}\u{1F1F1}" },
+  { code: "BE", name: "Belgium", dialCode: "+32", flag: "\u{1F1E7}\u{1F1EA}" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "\u{1F1E8}\u{1F1ED}" },
+  { code: "AT", name: "Austria", dialCode: "+43", flag: "\u{1F1E6}\u{1F1F9}" },
+  { code: "SE", name: "Sweden", dialCode: "+46", flag: "\u{1F1F8}\u{1F1EA}" },
+  { code: "NO", name: "Norway", dialCode: "+47", flag: "\u{1F1F3}\u{1F1F4}" },
+  { code: "DK", name: "Denmark", dialCode: "+45", flag: "\u{1F1E9}\u{1F1F0}" },
+  { code: "FI", name: "Finland", dialCode: "+358", flag: "\u{1F1EB}\u{1F1EE}" },
+  { code: "PL", name: "Poland", dialCode: "+48", flag: "\u{1F1F5}\u{1F1F1}" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", flag: "\u{1F1E8}\u{1F1FF}" },
+  { code: "GR", name: "Greece", dialCode: "+30", flag: "\u{1F1EC}\u{1F1F7}" },
+  { code: "IE", name: "Ireland", dialCode: "+353", flag: "\u{1F1EE}\u{1F1EA}" },
+  { code: "RO", name: "Romania", dialCode: "+40", flag: "\u{1F1F7}\u{1F1F4}" },
+  { code: "HU", name: "Hungary", dialCode: "+36", flag: "\u{1F1ED}\u{1F1FA}" },
+  // North America
+  { code: "US", name: "United States", dialCode: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "\u{1F1E8}\u{1F1E6}" },
+  { code: "MX", name: "Mexico", dialCode: "+52", flag: "\u{1F1F2}\u{1F1FD}" },
+  // South America
+  { code: "BR", name: "Brazil", dialCode: "+55", flag: "\u{1F1E7}\u{1F1F7}" },
+  { code: "AR", name: "Argentina", dialCode: "+54", flag: "\u{1F1E6}\u{1F1F7}" },
+  { code: "CL", name: "Chile", dialCode: "+56", flag: "\u{1F1E8}\u{1F1F1}" },
+  { code: "CO", name: "Colombia", dialCode: "+57", flag: "\u{1F1E8}\u{1F1F4}" },
+  { code: "PE", name: "Peru", dialCode: "+51", flag: "\u{1F1F5}\u{1F1EA}" },
+  // Asia
+  { code: "CN", name: "China", dialCode: "+86", flag: "\u{1F1E8}\u{1F1F3}" },
+  { code: "JP", name: "Japan", dialCode: "+81", flag: "\u{1F1EF}\u{1F1F5}" },
+  { code: "KR", name: "South Korea", dialCode: "+82", flag: "\u{1F1F0}\u{1F1F7}" },
+  { code: "IN", name: "India", dialCode: "+91", flag: "\u{1F1EE}\u{1F1F3}" },
+  { code: "ID", name: "Indonesia", dialCode: "+62", flag: "\u{1F1EE}\u{1F1E9}" },
+  { code: "TH", name: "Thailand", dialCode: "+66", flag: "\u{1F1F9}\u{1F1ED}" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", flag: "\u{1F1FB}\u{1F1F3}" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", flag: "\u{1F1F2}\u{1F1FE}" },
+  { code: "SG", name: "Singapore", dialCode: "+65", flag: "\u{1F1F8}\u{1F1EC}" },
+  { code: "PH", name: "Philippines", dialCode: "+63", flag: "\u{1F1F5}\u{1F1ED}" },
+  { code: "PK", name: "Pakistan", dialCode: "+92", flag: "\u{1F1F5}\u{1F1F0}" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880", flag: "\u{1F1E7}\u{1F1E9}" },
+  // Middle East
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", flag: "\u{1F1F8}\u{1F1E6}" },
+  { code: "IL", name: "Israel", dialCode: "+972", flag: "\u{1F1EE}\u{1F1F1}" },
+  { code: "TR", name: "Turkey", dialCode: "+90", flag: "\u{1F1F9}\u{1F1F7}" },
+  { code: "EG", name: "Egypt", dialCode: "+20", flag: "\u{1F1EA}\u{1F1EC}" },
+  // Africa
+  { code: "ZA", name: "South Africa", dialCode: "+27", flag: "\u{1F1FF}\u{1F1E6}" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", flag: "\u{1F1F3}\u{1F1EC}" },
+  { code: "KE", name: "Kenya", dialCode: "+254", flag: "\u{1F1F0}\u{1F1EA}" },
+  { code: "MA", name: "Morocco", dialCode: "+212", flag: "\u{1F1F2}\u{1F1E6}" },
+  { code: "TN", name: "Tunisia", dialCode: "+216", flag: "\u{1F1F9}\u{1F1F3}" },
+  { code: "DZ", name: "Algeria", dialCode: "+213", flag: "\u{1F1E9}\u{1F1FF}" },
+  // Oceania
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", flag: "\u{1F1F3}\u{1F1FF}" },
+  // Russia & CIS
+  { code: "RU", name: "Russia", dialCode: "+7", flag: "\u{1F1F7}\u{1F1FA}" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", flag: "\u{1F1FA}\u{1F1E6}" }
+].sort((a, b) => a.name.localeCompare(b.name));
+function findCountryByCode(code) {
+  return countries.find((c) => c.code === code.toUpperCase());
+}
+var defaultCountry = findCountryByCode("FR");
+
+// src/components/PreChatForm.tsx
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var EmailIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M22 7l-10 7L2 7" })
+] });
+var PhoneIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" }) });
+var ChevronIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) });
+function isValidEmail(email) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+function PreChatForm({ client: client2, config, onComplete, onSkip }) {
+  const showEmailOnly = config.fields === "email-only";
+  const showPhoneOnly = config.fields === "phone-only";
+  const showBoth = config.fields === "email-and-phone";
+  const showChoice = config.fields === "email-or-phone";
+  const getDefaultTab = () => {
+    if (showPhoneOnly) return "phone";
+    return "email";
+  };
+  const [activeTab, setActiveTab] = useState(getDefaultTab());
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
+  const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
+  const [countrySearch, setCountrySearch] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [phoneError, setPhoneError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const countryDropdownRef = useRef(null);
+  const searchInputRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (countryDropdownRef.current && !countryDropdownRef.current.contains(e.target)) {
+        setIsCountryDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (isCountryDropdownOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isCountryDropdownOpen]);
+  const filteredCountries = countries.filter(
+    (c) => c.name.toLowerCase().includes(countrySearch.toLowerCase()) || c.dialCode.includes(countrySearch) || c.code.toLowerCase().includes(countrySearch.toLowerCase())
+  );
+  const handleCountrySelect = (country) => {
+    setSelectedCountry(country);
+    setIsCountryDropdownOpen(false);
+    setCountrySearch("");
+  };
+  const formatPhoneForDisplay = (value) => {
+    const digits = value.replace(/\D/g, "");
+    return digits;
+  };
+  const handlePhoneChange = (e) => {
+    const target = e.target;
+    const formatted = formatPhoneForDisplay(target.value);
+    setPhone(formatted);
+    setPhoneError("");
+  };
+  const getFullPhoneNumber = () => {
+    if (!phone) return "";
+    return `${selectedCountry.dialCode}${phone}`;
+  };
+  const validateForm = () => {
+    let valid = true;
+    if (showEmailOnly || showBoth) {
+      if (!email.trim()) {
+        setEmailError("Email is required");
+        valid = false;
+      } else if (!isValidEmail(email)) {
+        setEmailError("Please enter a valid email");
+        valid = false;
+      }
+    }
+    if (showPhoneOnly || showBoth) {
+      const fullPhone = getFullPhoneNumber();
+      if (!phone.trim()) {
+        setPhoneError("Phone number is required");
+        valid = false;
+      } else if (!isValidPhoneNumber(fullPhone, selectedCountry.code)) {
+        setPhoneError("Please enter a valid phone number");
+        valid = false;
+      }
+    }
+    if (showChoice) {
+      if (activeTab === "email") {
+        if (!email.trim()) {
+          setEmailError("Email is required");
+          valid = false;
+        } else if (!isValidEmail(email)) {
+          setEmailError("Please enter a valid email");
+          valid = false;
+        }
+      } else {
+        const fullPhone = getFullPhoneNumber();
+        if (!phone.trim()) {
+          setPhoneError("Phone number is required");
+          valid = false;
+        } else if (!isValidPhoneNumber(fullPhone, selectedCountry.code)) {
+          setPhoneError("Please enter a valid phone number");
+          valid = false;
+        }
+      }
+    }
+    return valid;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validateForm()) return;
+    setIsSubmitting(true);
+    try {
+      const data = {};
+      if (showEmailOnly || showBoth || showChoice && activeTab === "email") {
+        data.email = email.trim();
+      }
+      if (showPhoneOnly || showBoth || showChoice && activeTab === "phone") {
+        const fullPhone = getFullPhoneNumber();
+        const parsed = parsePhoneNumber(fullPhone, selectedCountry.code);
+        if (parsed) {
+          data.phone = parsed.format("E.164");
+          data.phoneCountry = selectedCountry.code;
+        }
+      }
+      await client2.submitPreChat(data);
+      onComplete();
+    } catch (err) {
+      console.error("[PreChatForm] Submit error:", err);
+      if (activeTab === "email" || showEmailOnly || showBoth) {
+        setEmailError("Something went wrong. Please try again.");
+      } else {
+        setPhoneError("Something went wrong. Please try again.");
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const renderEmailField = () => /* @__PURE__ */ jsxs("div", { class: "pp-prechat-field", children: [
+    /* @__PURE__ */ jsx("label", { class: "pp-prechat-label", children: "Email address" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "email",
+        class: `pp-prechat-input ${emailError ? "error" : ""}`,
+        placeholder: "you@example.com",
+        value: email,
+        onInput: (e) => {
+          setEmail(e.target.value);
+          setEmailError("");
+        }
+      }
+    ),
+    emailError && /* @__PURE__ */ jsx("div", { class: "pp-prechat-error", children: emailError })
+  ] });
+  const renderPhoneField = () => /* @__PURE__ */ jsxs("div", { class: "pp-prechat-field", children: [
+    /* @__PURE__ */ jsx("label", { class: "pp-prechat-label", children: "Phone number" }),
+    /* @__PURE__ */ jsxs("div", { class: "pp-phone-input-wrapper", children: [
+      /* @__PURE__ */ jsxs("div", { class: "pp-country-select", ref: countryDropdownRef, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "pp-country-btn",
+            onClick: () => setIsCountryDropdownOpen(!isCountryDropdownOpen),
+            children: [
+              /* @__PURE__ */ jsx("span", { class: "pp-country-flag", children: selectedCountry.flag }),
+              /* @__PURE__ */ jsx("span", { class: "pp-country-code", children: selectedCountry.dialCode }),
+              /* @__PURE__ */ jsx(ChevronIcon, {})
+            ]
+          }
+        ),
+        isCountryDropdownOpen && /* @__PURE__ */ jsxs("div", { class: "pp-country-dropdown", children: [
+          /* @__PURE__ */ jsx("div", { class: "pp-country-search", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              class: "pp-country-search-input",
+              placeholder: "Search country...",
+              value: countrySearch,
+              onInput: (e) => setCountrySearch(e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { class: "pp-country-list", children: filteredCountries.map((country) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: `pp-country-option ${country.code === selectedCountry.code ? "selected" : ""}`,
+              onClick: () => handleCountrySelect(country),
+              children: [
+                /* @__PURE__ */ jsx("span", { class: "pp-country-flag", children: country.flag }),
+                /* @__PURE__ */ jsx("span", { class: "pp-country-name", children: country.name }),
+                /* @__PURE__ */ jsx("span", { class: "pp-country-dial", children: country.dialCode })
+              ]
+            },
+            country.code
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "tel",
+          class: `pp-prechat-input pp-phone-number-input ${phoneError ? "error" : ""}`,
+          placeholder: "612 345 678",
+          value: phone,
+          onInput: handlePhoneChange
+        }
+      )
+    ] }),
+    phoneError && /* @__PURE__ */ jsx("div", { class: "pp-prechat-error", children: phoneError })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { class: "pp-prechat", children: [
+    /* @__PURE__ */ jsx("h2", { class: "pp-prechat-title", children: "How can we reach you?" }),
+    /* @__PURE__ */ jsx("p", { class: "pp-prechat-subtitle", children: showBoth ? "Please provide your contact information so we can follow up if needed." : showChoice ? "Choose how you would like us to contact you." : showEmailOnly ? "Enter your email so we can follow up with you." : "Enter your phone number so we can call you back." }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      showChoice && /* @__PURE__ */ jsxs("div", { class: "pp-prechat-tabs", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: `pp-prechat-tab ${activeTab === "email" ? "active" : ""}`,
+            onClick: () => {
+              setActiveTab("email");
+              setPhoneError("");
+            },
+            children: [
+              /* @__PURE__ */ jsx(EmailIcon, {}),
+              "Email"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: `pp-prechat-tab ${activeTab === "phone" ? "active" : ""}`,
+            onClick: () => {
+              setActiveTab("phone");
+              setEmailError("");
+            },
+            children: [
+              /* @__PURE__ */ jsx(PhoneIcon, {}),
+              "Phone"
+            ]
+          }
+        )
+      ] }),
+      showEmailOnly && renderEmailField(),
+      showPhoneOnly && renderPhoneField(),
+      showBoth && /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderEmailField(),
+        renderPhoneField()
+      ] }),
+      showChoice && /* @__PURE__ */ jsxs(Fragment, { children: [
+        activeTab === "email" && renderEmailField(),
+        activeTab === "phone" && renderPhoneField()
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "submit", class: "pp-prechat-submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : "Start chatting" }),
+      !config.required && /* @__PURE__ */ jsx("button", { type: "button", class: "pp-prechat-skip", onClick: onSkip, children: "Skip for now" })
+    ] })
+  ] });
+}
+
 // src/components/ChatWidget.tsx
-import { Fragment as Fragment2, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+function formatDateSeparator(date) {
+  const now = /* @__PURE__ */ new Date();
+  const messageDate = new Date(date);
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const msgDay = new Date(messageDate.getFullYear(), messageDate.getMonth(), messageDate.getDate());
+  const diffDays = Math.floor((today.getTime() - msgDay.getTime()) / (1e3 * 60 * 60 * 24));
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  return messageDate.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: messageDate.getFullYear() !== now.getFullYear() ? "numeric" : void 0
+  });
+}
+function getDateKey(date) {
+  const d = new Date(date);
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+}
 function ChatWidget({ client: client2, config: initialConfig }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-  const [operatorOnline, setOperatorOnline] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
-  const [unreadCount, setUnreadCount] = useState(0);
-  const [pendingAttachments, setPendingAttachments] = useState([]);
-  const [isUploading, setIsUploading] = useState(false);
-  const [replyingTo, setReplyingTo] = useState(null);
-  const [editingMessage, setEditingMessage] = useState(null);
-  const [editContent, setEditContent] = useState("");
-  const [messageMenu, setMessageMenu] = useState(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [hoveredMessageId, setHoveredMessageId] = useState(null);
-  const [longPressTimer, setLongPressTimer] = useState(null);
-  const [config, setConfig] = useState(initialConfig);
-  const messagesEndRef = useRef(null);
-  const inputRef = useRef(null);
-  const fileInputRef = useRef(null);
-  const messagesContainerRef = useRef(null);
-  useEffect(() => {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [messages, setMessages] = useState2([]);
+  const [inputValue, setInputValue] = useState2("");
+  const [isTyping, setIsTyping] = useState2(false);
+  const [operatorOnline, setOperatorOnline] = useState2(false);
+  const [isConnected, setIsConnected] = useState2(false);
+  const [unreadCount, setUnreadCount] = useState2(0);
+  const [pendingAttachments, setPendingAttachments] = useState2([]);
+  const [isUploading, setIsUploading] = useState2(false);
+  const [replyingTo, setReplyingTo] = useState2(null);
+  const [editingMessage, setEditingMessage] = useState2(null);
+  const [editContent, setEditContent] = useState2("");
+  const [messageMenu, setMessageMenu] = useState2(null);
+  const [isDragging, setIsDragging] = useState2(false);
+  const [hoveredMessageId, setHoveredMessageId] = useState2(null);
+  const [longPressTimer, setLongPressTimer] = useState2(null);
+  const [swipedMessageId, setSwipedMessageId] = useState2(null);
+  const [swipeOffset, setSwipeOffset] = useState2(0);
+  const touchStartRef = useRef2(null);
+  const [config, setConfig] = useState2(initialConfig);
+  const [preChatForm, setPreChatForm] = useState2(void 0);
+  const [preChatSkipped, setPreChatSkipped] = useState2(false);
+  const messagesEndRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const fileInputRef = useRef2(null);
+  const messagesContainerRef = useRef2(null);
+  useEffect2(() => {
     const unsubOpen = client2.on("openChange", setIsOpen);
     const unsubMessage = client2.on("message", () => {
       setMessages([...client2.getMessages()]);
@@ -1057,6 +1850,10 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setMessages(client2.getMessages());
       setOperatorOnline(client2.getSession()?.operatorOnline ?? false);
       setConfig(client2.getConfig());
+      setPreChatForm(client2.getSession()?.preChatForm);
+    });
+    const unsubPreChat = client2.on("preChatCompleted", () => {
+      setPreChatForm((prev) => prev ? { ...prev, completed: true } : prev);
     });
     const unsubConfig = client2.on("configUpdate", () => {
       setConfig(client2.getConfig());
@@ -1066,6 +1863,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setMessages(client2.getMessages());
       setOperatorOnline(client2.getSession()?.operatorOnline ?? false);
       setConfig(client2.getConfig());
+      setPreChatForm(client2.getSession()?.preChatForm);
     }
     return () => {
       unsubOpen();
@@ -1073,15 +1871,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       unsubTyping();
       unsubPresence();
       unsubConnect();
+      unsubPreChat();
       unsubConfig();
     };
   }, [client2]);
-  useEffect(() => {
+  useEffect2(() => {
     if (isOpen) {
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, isOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (isOpen) {
       setTimeout(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
@@ -1090,7 +1889,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setUnreadCount(0);
     }
   }, [isOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen && messages.length > 0) {
       const unread = messages.filter(
         (msg) => msg.sender !== "visitor" && msg.status !== "read"
@@ -1108,14 +1907,14 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       client2.sendReadStatus(messageIds, "read");
     }
   }, [isOpen, isConnected, messages, client2]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen || !isConnected) return;
     const timer = setTimeout(() => {
       markMessagesAsRead();
     }, 1e3);
     return () => clearTimeout(timer);
   }, [isOpen, isConnected, messages, markMessagesAsRead]);
-  useEffect(() => {
+  useEffect2(() => {
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible" && isOpen) {
         markMessagesAsRead();
@@ -1124,7 +1923,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
   }, [isOpen, markMessagesAsRead]);
-  useEffect(() => {
+  useEffect2(() => {
     const unsubRead = client2.on(
       "read",
       () => {
@@ -1263,26 +2062,43 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       y: mouseEvent.clientY
     });
   };
-  const handleTouchStart = (message) => {
-    const timer = setTimeout(() => {
-      if (navigator.vibrate) navigator.vibrate(50);
-      setMessageMenu({
-        message,
-        x: window.innerWidth / 2 - 60,
-        // Center horizontally
-        y: window.innerHeight / 2 - 50
-        // Center vertically
-      });
-    }, 500);
-    setLongPressTimer(timer);
+  const handleTouchStart = (e, message) => {
+    const touch = e.touches[0];
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+    if (swipedMessageId && swipedMessageId !== message.id) {
+      setSwipedMessageId(null);
+      setSwipeOffset(0);
+    }
   };
-  const handleTouchEnd = () => {
-    if (longPressTimer) {
-      clearTimeout(longPressTimer);
-      setLongPressTimer(null);
+  const handleTouchMove = (e, message) => {
+    if (!touchStartRef.current) return;
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - touchStartRef.current.x;
+    const deltaY = touch.clientY - touchStartRef.current.y;
+    if (Math.abs(deltaY) > Math.abs(deltaX)) return;
+    if (deltaX < 0) {
+      const offset = Math.max(deltaX, -100);
+      setSwipeOffset(offset);
+      setSwipedMessageId(message.id);
     }
   };
-  useEffect(() => {
+  const handleTouchEnd = (message) => {
+    if (!touchStartRef.current) return;
+    const elapsed = Date.now() - touchStartRef.current.time;
+    if (swipeOffset < -50 || swipeOffset < -20 && elapsed < 200) {
+      setSwipeOffset(-80);
+      if (navigator.vibrate) navigator.vibrate(30);
+    } else {
+      setSwipeOffset(0);
+      setSwipedMessageId(null);
+    }
+    touchStartRef.current = null;
+  };
+  const resetSwipe = () => {
+    setSwipedMessageId(null);
+    setSwipeOffset(0);
+  };
+  useEffect2(() => {
     if (!messageMenu) return;
     const handleClickOutside = () => setMessageMenu(null);
     document.addEventListener("click", handleClickOutside);
@@ -1298,7 +2114,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       }, 1500);
     }
   };
-  const dragCounterRef = useRef(0);
+  const dragCounterRef = useRef2(0);
   const handleDragEnter = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1374,22 +2190,24 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const theme = getTheme(config.theme ?? "auto");
   const primaryColor = config.primaryColor ?? "#6366f1";
   const actionIconColor = theme === "dark" ? "#9ca3af" : "#6b7280";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: styles(primaryColor, theme) }),
-    /* @__PURE__ */ jsxs(
+  const shouldShowPreChat = preChatForm && preChatForm.enabled && !preChatForm.completed && !preChatSkipped && // Before first message: show immediately
+  (preChatForm.timing === "before-first-message" && messages.length === 0 || preChatForm.timing === "after-first-message" && messages.some((m) => m.sender === "visitor"));
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("style", { children: styles(primaryColor, theme) }),
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         class: `pp-toggle pp-${position}`,
         onClick: () => client2.toggleOpen(),
         "aria-label": isOpen ? "Close chat" : "Open chat",
         children: [
-          isOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {}),
-          !isOpen && unreadCount > 0 && /* @__PURE__ */ jsx("span", { class: "pp-unread-badge", children: unreadCount > 9 ? "9+" : unreadCount }),
-          !isOpen && unreadCount === 0 && operatorOnline && /* @__PURE__ */ jsx("span", { class: "pp-online-dot" })
+          isOpen ? /* @__PURE__ */ jsx2(CloseIcon, {}) : /* @__PURE__ */ jsx2(ChatIcon, {}),
+          !isOpen && unreadCount > 0 && /* @__PURE__ */ jsx2("span", { class: "pp-unread-badge", children: unreadCount > 9 ? "9+" : unreadCount }),
+          !isOpen && unreadCount === 0 && operatorOnline && /* @__PURE__ */ jsx2("span", { class: "pp-online-dot" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs(
+    isOpen && /* @__PURE__ */ jsxs2(
       "div",
       {
         class: `pp-window pp-${position} pp-theme-${theme} ${isDragging ? "pp-dragging" : ""}`,
@@ -1398,39 +2216,55 @@ function ChatWidget({ client: client2, config: initialConfig }) {
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          isDragging && /* @__PURE__ */ jsxs("div", { class: "pp-drop-overlay", children: [
-            /* @__PURE__ */ jsx("div", { class: "pp-drop-icon", children: /* @__PURE__ */ jsx(AttachIcon, {}) }),
-            /* @__PURE__ */ jsx("div", { class: "pp-drop-text", children: "Drop files to upload" })
+          isDragging && /* @__PURE__ */ jsxs2("div", { class: "pp-drop-overlay", children: [
+            /* @__PURE__ */ jsx2("div", { class: "pp-drop-icon", children: /* @__PURE__ */ jsx2(AttachIcon, {}) }),
+            /* @__PURE__ */ jsx2("div", { class: "pp-drop-text", children: "Drop files to upload" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { class: "pp-header", children: [
-            /* @__PURE__ */ jsxs("div", { class: "pp-header-info", children: [
-              config.operatorAvatar && /* @__PURE__ */ jsx("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
-                /* @__PURE__ */ jsx("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsx("span", { class: "pp-status-dot pp-online" }),
+          /* @__PURE__ */ jsxs2("div", { class: "pp-header", children: [
+            /* @__PURE__ */ jsxs2("div", { class: "pp-header-info", children: [
+              config.operatorAvatar && /* @__PURE__ */ jsx2("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx2("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
+                /* @__PURE__ */ jsx2("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                  /* @__PURE__ */ jsx2("span", { class: "pp-status-dot pp-online" }),
                   " Online"
-                ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsx("span", { class: "pp-status-dot" }),
+                ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                  /* @__PURE__ */ jsx2("span", { class: "pp-status-dot" }),
                   " Away"
                 ] }) })
               ] })
             ] }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 class: "pp-close-btn",
                 onClick: () => client2.setOpen(false),
                 "aria-label": "Close chat",
-                children: /* @__PURE__ */ jsx(CloseIcon, {})
+                children: /* @__PURE__ */ jsx2(CloseIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { class: "pp-messages", ref: messagesContainerRef, children: [
-            config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ jsx("div", { class: "pp-welcome", children: config.welcomeMessage }),
-            messages.map((msg) => {
+          shouldShowPreChat && preChatForm && /* @__PURE__ */ jsx2(
+            PreChatForm,
+            {
+              client: client2,
+              config: preChatForm,
+              onComplete: () => {
+                setPreChatForm((prev) => prev ? { ...prev, completed: true } : prev);
+              },
+              onSkip: () => {
+                setPreChatSkipped(true);
+              }
+            }
+          ),
+          !shouldShowPreChat && /* @__PURE__ */ jsxs2("div", { class: "pp-messages", ref: messagesContainerRef, onClick: () => swipedMessageId && resetSwipe(), children: [
+            config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ jsx2("div", { class: "pp-welcome", children: config.welcomeMessage }),
+            messages.map((msg, index) => {
               const isDeleted = !!msg.deletedAt;
               const isEdited = !!msg.editedAt;
+              const msgDate = new Date(msg.timestamp);
+              const prevMsg = index > 0 ? messages[index - 1] : null;
+              const showDateSeparator = !prevMsg || getDateKey(new Date(prevMsg.timestamp)) !== getDateKey(msgDate);
               let replyData = null;
               if (msg.replyTo) {
                 if (typeof msg.replyTo === "object") {
@@ -1452,123 +2286,168 @@ function ChatWidget({ client: client2, config: initialConfig }) {
               }
               const isHovered = hoveredMessageId === msg.id;
               const showActions = isHovered && !isDeleted;
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  id: `pp-msg-${msg.id}`,
-                  class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
-                  onContextMenu: (e) => handleMessageContextMenu(e, msg),
-                  onMouseEnter: () => setHoveredMessageId(msg.id),
-                  onMouseLeave: () => setHoveredMessageId(null),
-                  onTouchStart: () => handleTouchStart(msg),
-                  onTouchEnd: handleTouchEnd,
-                  onTouchCancel: handleTouchEnd,
-                  children: [
-                    showActions && /* @__PURE__ */ jsxs("div", { class: `pp-message-actions ${msg.sender === "visitor" ? "pp-actions-left" : "pp-actions-right"}`, children: [
-                      /* @__PURE__ */ jsx(
+              const isSwiped = swipedMessageId === msg.id;
+              const msgSwipeOffset = isSwiped ? swipeOffset : 0;
+              return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                showDateSeparator && /* @__PURE__ */ jsx2("div", { class: "pp-date-separator", children: /* @__PURE__ */ jsx2("span", { children: formatDateSeparator(msgDate) }) }),
+                /* @__PURE__ */ jsxs2("div", { class: `pp-message-swipe-container ${msg.sender === "visitor" ? "pp-swipe-left" : "pp-swipe-right"}`, children: [
+                  /* @__PURE__ */ jsxs2("div", { class: "pp-swipe-actions", children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        class: "pp-swipe-action pp-swipe-reply",
+                        onClick: () => {
+                          handleReply(msg);
+                          resetSwipe();
+                        },
+                        children: /* @__PURE__ */ jsx2(ReplyIcon, { color: "#fff" })
+                      }
+                    ),
+                    msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                      /* @__PURE__ */ jsx2(
                         "button",
                         {
-                          class: "pp-action-btn",
-                          onClick: () => handleReply(msg),
-                          title: "Reply",
-                          children: /* @__PURE__ */ jsx(ReplyIcon, { color: actionIconColor })
+                          class: "pp-swipe-action pp-swipe-edit",
+                          onClick: () => {
+                            handleStartEdit(msg);
+                            resetSwipe();
+                          },
+                          children: /* @__PURE__ */ jsx2(EditIcon, { color: "#fff" })
                         }
                       ),
-                      msg.sender === "visitor" && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          class: "pp-swipe-action pp-swipe-delete",
+                          onClick: () => {
+                            handleDelete(msg);
+                            resetSwipe();
+                          },
+                          children: /* @__PURE__ */ jsx2(DeleteIcon, { color: "#fff" })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      id: `pp-msg-${msg.id}`,
+                      class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
+                      style: { transform: `translateX(${msgSwipeOffset}px)`, transition: touchStartRef.current ? "none" : "transform 0.2s ease-out" },
+                      onContextMenu: (e) => handleMessageContextMenu(e, msg),
+                      onMouseEnter: () => setHoveredMessageId(msg.id),
+                      onMouseLeave: () => setHoveredMessageId(null),
+                      onTouchStart: (e) => handleTouchStart(e, msg),
+                      onTouchMove: (e) => handleTouchMove(e, msg),
+                      onTouchEnd: () => handleTouchEnd(msg),
+                      onTouchCancel: () => handleTouchEnd(msg),
+                      children: [
+                        showActions && /* @__PURE__ */ jsxs2("div", { class: `pp-message-actions ${msg.sender === "visitor" ? "pp-actions-left" : "pp-actions-right"}`, children: [
+                          /* @__PURE__ */ jsx2(
+                            "button",
+                            {
+                              class: "pp-action-btn",
+                              onClick: () => handleReply(msg),
+                              title: "Reply",
+                              children: /* @__PURE__ */ jsx2(ReplyIcon, { color: actionIconColor })
+                            }
+                          ),
+                          msg.sender === "visitor" && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                            /* @__PURE__ */ jsx2(
+                              "button",
+                              {
+                                class: "pp-action-btn",
+                                onClick: () => handleStartEdit(msg),
+                                title: "Edit",
+                                children: /* @__PURE__ */ jsx2(EditIcon, { color: actionIconColor })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "button",
+                              {
+                                class: "pp-action-btn pp-action-delete",
+                                onClick: () => handleDelete(msg),
+                                title: "Delete",
+                                children: /* @__PURE__ */ jsx2(DeleteIcon, { color: actionIconColor })
+                              }
+                            )
+                          ] })
+                        ] }),
+                        replyData && (replyData.content || replyData.hasAttachment) && /* @__PURE__ */ jsxs2(
+                          "div",
                           {
-                            class: "pp-action-btn",
-                            onClick: () => handleStartEdit(msg),
-                            title: "Edit",
-                            children: /* @__PURE__ */ jsx(EditIcon, { color: actionIconColor })
+                            class: "pp-reply-quote pp-reply-quote-clickable",
+                            onClick: () => scrollToMessage(replyData.id),
+                            role: "button",
+                            tabIndex: 0,
+                            onKeyDown: (e) => e.key === "Enter" && scrollToMessage(replyData.id),
+                            children: [
+                              /* @__PURE__ */ jsx2("span", { class: "pp-reply-sender", children: replyData.sender === "visitor" ? "You" : "Support" }),
+                              /* @__PURE__ */ jsx2("span", { class: "pp-reply-content", children: replyData.deleted ? "Message deleted" : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                                replyData.hasAttachment && /* @__PURE__ */ jsx2("span", { class: "pp-reply-attachment-icon", children: replyData.attachmentType?.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
+                                replyData.content ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                                  (replyData.content || "").slice(0, 50),
+                                  (replyData.content || "").length > 50 ? "..." : ""
+                                ] }) : replyData.attachmentType?.startsWith("image/") ? "Photo" : "File"
+                              ] }) })
+                            ]
                           }
                         ),
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            class: "pp-action-btn pp-action-delete",
-                            onClick: () => handleDelete(msg),
-                            title: "Delete",
-                            children: /* @__PURE__ */ jsx(DeleteIcon, { color: actionIconColor })
-                          }
-                        )
-                      ] })
-                    ] }),
-                    replyData && (replyData.content || replyData.hasAttachment) && /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        class: "pp-reply-quote pp-reply-quote-clickable",
-                        onClick: () => scrollToMessage(replyData.id),
-                        role: "button",
-                        tabIndex: 0,
-                        onKeyDown: (e) => e.key === "Enter" && scrollToMessage(replyData.id),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { class: "pp-reply-sender", children: replyData.sender === "visitor" ? "You" : "Support" }),
-                          /* @__PURE__ */ jsx("span", { class: "pp-reply-content", children: replyData.deleted ? "Message deleted" : /* @__PURE__ */ jsxs(Fragment2, { children: [
-                            replyData.hasAttachment && /* @__PURE__ */ jsx("span", { class: "pp-reply-attachment-icon", children: replyData.attachmentType?.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
-                            replyData.content ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-                              (replyData.content || "").slice(0, 50),
-                              (replyData.content || "").length > 50 ? "..." : ""
-                            ] }) : replyData.attachmentType?.startsWith("image/") ? "Photo" : "File"
-                          ] }) })
-                        ]
-                      }
-                    ),
-                    isDeleted ? /* @__PURE__ */ jsxs("div", { class: "pp-message-content pp-deleted-content", children: [
-                      /* @__PURE__ */ jsx("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
-                      " Message deleted"
-                    ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-                      msg.content && /* @__PURE__ */ jsx("div", { class: "pp-message-content", children: msg.content }),
-                      msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { class: "pp-message-attachments", children: msg.attachments.map((att) => /* @__PURE__ */ jsx(AttachmentDisplay, { attachment: att }, att.id)) })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { class: "pp-message-time", children: [
-                      formatTime(msg.timestamp),
-                      isEdited && !isDeleted && /* @__PURE__ */ jsx("span", { class: "pp-edited-badge", children: "edited" }),
-                      msg.sender === "ai" && /* @__PURE__ */ jsx("span", { class: "pp-ai-badge", children: "AI" }),
-                      msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ jsx("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx(StatusIcon, { status: msg.status }) })
-                    ] })
-                  ]
-                },
-                msg.id
-              );
+                        isDeleted ? /* @__PURE__ */ jsxs2("div", { class: "pp-message-content pp-deleted-content", children: [
+                          /* @__PURE__ */ jsx2("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
+                          " Message deleted"
+                        ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                          msg.content && /* @__PURE__ */ jsx2("div", { class: "pp-message-content", children: msg.content }),
+                          msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsx2("div", { class: "pp-message-attachments", children: msg.attachments.map((att) => /* @__PURE__ */ jsx2(AttachmentDisplay, { attachment: att }, att.id)) })
+                        ] }),
+                        /* @__PURE__ */ jsxs2("div", { class: "pp-message-time", children: [
+                          formatTime(msg.timestamp),
+                          isEdited && !isDeleted && /* @__PURE__ */ jsx2("span", { class: "pp-edited-badge", children: "edited" }),
+                          msg.sender === "ai" && /* @__PURE__ */ jsx2("span", { class: "pp-ai-badge", children: "AI" }),
+                          msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ jsx2("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx2(StatusIcon, { status: msg.status }) })
+                        ] })
+                      ]
+                    }
+                  )
+                ] })
+              ] }, msg.id);
             }),
-            isTyping && /* @__PURE__ */ jsxs("div", { class: "pp-message pp-message-operator pp-typing", children: [
-              /* @__PURE__ */ jsx("span", {}),
-              /* @__PURE__ */ jsx("span", {}),
-              /* @__PURE__ */ jsx("span", {})
+            isTyping && /* @__PURE__ */ jsxs2("div", { class: "pp-message pp-message-operator pp-typing", children: [
+              /* @__PURE__ */ jsx2("span", {}),
+              /* @__PURE__ */ jsx2("span", {}),
+              /* @__PURE__ */ jsx2("span", {})
             ] }),
-            /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+            /* @__PURE__ */ jsx2("div", { ref: messagesEndRef })
           ] }),
-          messageMenu && /* @__PURE__ */ jsxs(
+          messageMenu && /* @__PURE__ */ jsxs2(
             "div",
             {
               class: "pp-message-menu",
               style: { top: `${messageMenu.y}px`, left: `${messageMenu.x}px` },
               children: [
-                /* @__PURE__ */ jsxs("button", { onClick: () => handleReply(messageMenu.message), children: [
-                  /* @__PURE__ */ jsx(ReplyIcon, { color: actionIconColor }),
+                /* @__PURE__ */ jsxs2("button", { onClick: () => handleReply(messageMenu.message), children: [
+                  /* @__PURE__ */ jsx2(ReplyIcon, { color: actionIconColor }),
                   " Reply"
                 ] }),
-                messageMenu.message.sender === "visitor" && !messageMenu.message.deletedAt && /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsxs("button", { onClick: () => handleStartEdit(messageMenu.message), children: [
-                    /* @__PURE__ */ jsx(EditIcon, { color: actionIconColor }),
+                messageMenu.message.sender === "visitor" && !messageMenu.message.deletedAt && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+                  /* @__PURE__ */ jsxs2("button", { onClick: () => handleStartEdit(messageMenu.message), children: [
+                    /* @__PURE__ */ jsx2(EditIcon, { color: actionIconColor }),
                     " Edit"
                   ] }),
-                  /* @__PURE__ */ jsxs("button", { class: "pp-menu-delete", onClick: () => handleDelete(messageMenu.message), children: [
-                    /* @__PURE__ */ jsx(DeleteIcon, { color: "#ef4444" }),
+                  /* @__PURE__ */ jsxs2("button", { class: "pp-menu-delete", onClick: () => handleDelete(messageMenu.message), children: [
+                    /* @__PURE__ */ jsx2(DeleteIcon, { color: "#ef4444" }),
                     " Delete"
                   ] })
                 ] })
               ]
             }
           ),
-          editingMessage && /* @__PURE__ */ jsxs("div", { class: "pp-edit-modal", children: [
-            /* @__PURE__ */ jsxs("div", { class: "pp-edit-header", children: [
-              /* @__PURE__ */ jsx("span", { children: "Edit message" }),
-              /* @__PURE__ */ jsx("button", { onClick: handleCancelEdit, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+          editingMessage && /* @__PURE__ */ jsxs2("div", { class: "pp-edit-modal", children: [
+            /* @__PURE__ */ jsxs2("div", { class: "pp-edit-header", children: [
+              /* @__PURE__ */ jsx2("span", { children: "Edit message" }),
+              /* @__PURE__ */ jsx2("button", { onClick: handleCancelEdit, children: /* @__PURE__ */ jsx2(CloseIcon, {}) })
             ] }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "textarea",
               {
                 class: "pp-edit-input",
@@ -1577,41 +2456,41 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 autoFocus: true
               }
             ),
-            /* @__PURE__ */ jsxs("div", { class: "pp-edit-actions", children: [
-              /* @__PURE__ */ jsx("button", { class: "pp-edit-cancel", onClick: handleCancelEdit, children: "Cancel" }),
-              /* @__PURE__ */ jsx("button", { class: "pp-edit-save", onClick: handleSaveEdit, disabled: !editContent.trim(), children: "Save" })
+            /* @__PURE__ */ jsxs2("div", { class: "pp-edit-actions", children: [
+              /* @__PURE__ */ jsx2("button", { class: "pp-edit-cancel", onClick: handleCancelEdit, children: "Cancel" }),
+              /* @__PURE__ */ jsx2("button", { class: "pp-edit-save", onClick: handleSaveEdit, disabled: !editContent.trim(), children: "Save" })
             ] })
           ] }),
-          replyingTo && /* @__PURE__ */ jsxs("div", { class: "pp-reply-preview", children: [
-            /* @__PURE__ */ jsxs("div", { class: "pp-reply-preview-content", children: [
-              /* @__PURE__ */ jsx("span", { class: "pp-reply-label", children: "Replying to" }),
-              /* @__PURE__ */ jsxs("span", { class: "pp-reply-text", children: [
-                replyingTo.attachments && replyingTo.attachments.length > 0 && /* @__PURE__ */ jsx("span", { class: "pp-reply-attachment-icon", children: replyingTo.attachments[0].mimeType.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
-                replyingTo.content ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+          replyingTo && /* @__PURE__ */ jsxs2("div", { class: "pp-reply-preview", children: [
+            /* @__PURE__ */ jsxs2("div", { class: "pp-reply-preview-content", children: [
+              /* @__PURE__ */ jsx2("span", { class: "pp-reply-label", children: "Replying to" }),
+              /* @__PURE__ */ jsxs2("span", { class: "pp-reply-text", children: [
+                replyingTo.attachments && replyingTo.attachments.length > 0 && /* @__PURE__ */ jsx2("span", { class: "pp-reply-attachment-icon", children: replyingTo.attachments[0].mimeType.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
+                replyingTo.content ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
                   replyingTo.content.slice(0, 50),
                   replyingTo.content.length > 50 ? "..." : ""
                 ] }) : replyingTo.attachments?.[0]?.mimeType.startsWith("image/") ? "Photo" : "File"
               ] })
             ] }),
-            /* @__PURE__ */ jsx("button", { class: "pp-reply-cancel", onClick: handleCancelReply, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+            /* @__PURE__ */ jsx2("button", { class: "pp-reply-cancel", onClick: handleCancelReply, children: /* @__PURE__ */ jsx2(CloseIcon, {}) })
           ] }),
-          pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { class: "pp-attachments-preview", children: pendingAttachments.map((pending) => /* @__PURE__ */ jsxs("div", { class: `pp-attachment-preview pp-attachment-${pending.status}`, children: [
-            pending.preview ? /* @__PURE__ */ jsx("img", { src: pending.preview, alt: pending.file.name, class: "pp-preview-img" }) : /* @__PURE__ */ jsx("div", { class: "pp-preview-file", children: /* @__PURE__ */ jsx(FileIcon, { mimeType: pending.file.type }) }),
-            /* @__PURE__ */ jsx(
+          pendingAttachments.length > 0 && /* @__PURE__ */ jsx2("div", { class: "pp-attachments-preview", children: pendingAttachments.map((pending) => /* @__PURE__ */ jsxs2("div", { class: `pp-attachment-preview pp-attachment-${pending.status}`, children: [
+            pending.preview ? /* @__PURE__ */ jsx2("img", { src: pending.preview, alt: pending.file.name, class: "pp-preview-img" }) : /* @__PURE__ */ jsx2("div", { class: "pp-preview-file", children: /* @__PURE__ */ jsx2(FileIcon, { mimeType: pending.file.type }) }),
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 class: "pp-remove-attachment",
                 onClick: () => handleRemoveAttachment(pending.id),
                 "aria-label": "Remove attachment",
                 type: "button",
-                children: /* @__PURE__ */ jsx(CloseIcon, {})
+                children: /* @__PURE__ */ jsx2(CloseIcon, {})
               }
             ),
-            pending.status === "uploading" && /* @__PURE__ */ jsx("div", { class: "pp-upload-progress", style: { width: `${pending.progress}%` } }),
-            pending.status === "error" && /* @__PURE__ */ jsx("div", { class: "pp-upload-error", title: pending.error, children: "!" })
+            pending.status === "uploading" && /* @__PURE__ */ jsx2("div", { class: "pp-upload-progress", style: { width: `${pending.progress}%` } }),
+            pending.status === "error" && /* @__PURE__ */ jsx2("div", { class: "pp-upload-error", title: pending.error, children: "!" })
           ] }, pending.id)) }),
-          /* @__PURE__ */ jsxs("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
-            /* @__PURE__ */ jsx(
+          !shouldShowPreChat && /* @__PURE__ */ jsxs2("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
+            /* @__PURE__ */ jsx2(
               "input",
               {
                 ref: (el) => {
@@ -1626,7 +2505,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 multiple: true
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1634,10 +2513,10 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 onClick: () => fileInputRef.current?.click(),
                 disabled: !isConnected || isUploading,
                 "aria-label": "Attach file",
-                children: /* @__PURE__ */ jsx(AttachIcon, {})
+                children: /* @__PURE__ */ jsx2(AttachIcon, {})
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "input",
               {
                 ref: inputRef,
@@ -1649,20 +2528,20 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                 disabled: !isConnected
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "submit",
                 class: "pp-send-btn",
                 disabled: !inputValue.trim() && pendingAttachments.filter((a) => a.status === "ready").length === 0 || !isConnected || isUploading,
                 "aria-label": "Send message",
-                children: /* @__PURE__ */ jsx(SendIcon, {})
+                children: /* @__PURE__ */ jsx2(SendIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { class: "pp-footer", children: [
+          /* @__PURE__ */ jsxs2("div", { class: "pp-footer", children: [
             "Powered by ",
-            /* @__PURE__ */ jsx("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
+            /* @__PURE__ */ jsx2("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
           ] })
         ]
       }
@@ -1690,90 +2569,90 @@ function formatTime(timestamp) {
   return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 function ChatIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx2("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
 function SendIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx2("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    /* @__PURE__ */ jsx2("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
   ] });
 }
 function StatusIcon({ status }) {
   if (!status || status === "sending" || status === "sent") {
-    return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) });
+    return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check", children: /* @__PURE__ */ jsx2("polyline", { points: "3 8 7 12 13 4" }) });
   }
   if (status === "delivered") {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double", children: [
-      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
-      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double", children: [
+      /* @__PURE__ */ jsx2("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx2("polyline", { points: "7 8 11 12 17 4" })
     ] });
   }
   if (status === "read") {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double pp-check-read", children: [
-      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
-      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double pp-check-read", children: [
+      /* @__PURE__ */ jsx2("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx2("polyline", { points: "7 8 11 12 17 4" })
     ] });
   }
   return null;
 }
 function AttachIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("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" }) });
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx2("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" }) });
 }
 function ReplyIcon({ color, size = 16 }) {
   const strokeColor = color || "currentColor";
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx("polyline", { points: "9 17 4 12 9 7" }),
-    /* @__PURE__ */ jsx("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx2("polyline", { points: "9 17 4 12 9 7" }),
+    /* @__PURE__ */ jsx2("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
   ] });
 }
 function EditIcon({ color, size = 16 }) {
   const strokeColor = color || "currentColor";
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) });
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: /* @__PURE__ */ jsx2("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) });
 }
 function DeleteIcon({ color, size = 16 }) {
   const strokeColor = color || "currentColor";
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
-    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx2("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsx2("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
   ] });
 }
 function FileIcon({ mimeType }) {
   if (mimeType === "application/pdf") {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-      /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
-      /* @__PURE__ */ jsx("path", { d: "M9 15h6" }),
-      /* @__PURE__ */ jsx("path", { d: "M9 11h6" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx2("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx2("polyline", { points: "14 2 14 8 20 8" }),
+      /* @__PURE__ */ jsx2("path", { d: "M9 15h6" }),
+      /* @__PURE__ */ jsx2("path", { d: "M9 11h6" })
     ] });
   }
   if (mimeType.startsWith("audio/")) {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-      /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
-      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
-      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx2("path", { d: "M9 18V5l12-2v13" }),
+      /* @__PURE__ */ jsx2("circle", { cx: "6", cy: "18", r: "3" }),
+      /* @__PURE__ */ jsx2("circle", { cx: "18", cy: "16", r: "3" })
     ] });
   }
   if (mimeType.startsWith("video/")) {
-    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-      /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2.18", ry: "2.18" }),
-      /* @__PURE__ */ jsx("line", { x1: "7", y1: "2", x2: "7", y2: "22" }),
-      /* @__PURE__ */ jsx("line", { x1: "17", y1: "2", x2: "17", y2: "22" }),
-      /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-      /* @__PURE__ */ jsx("line", { x1: "2", y1: "7", x2: "7", y2: "7" }),
-      /* @__PURE__ */ jsx("line", { x1: "2", y1: "17", x2: "7", y2: "17" }),
-      /* @__PURE__ */ jsx("line", { x1: "17", y1: "17", x2: "22", y2: "17" }),
-      /* @__PURE__ */ jsx("line", { x1: "17", y1: "7", x2: "22", y2: "7" })
+    return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx2("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2.18", ry: "2.18" }),
+      /* @__PURE__ */ jsx2("line", { x1: "7", y1: "2", x2: "7", y2: "22" }),
+      /* @__PURE__ */ jsx2("line", { x1: "17", y1: "2", x2: "17", y2: "22" }),
+      /* @__PURE__ */ jsx2("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx2("line", { x1: "2", y1: "7", x2: "7", y2: "7" }),
+      /* @__PURE__ */ jsx2("line", { x1: "2", y1: "17", x2: "7", y2: "17" }),
+      /* @__PURE__ */ jsx2("line", { x1: "17", y1: "17", x2: "22", y2: "17" }),
+      /* @__PURE__ */ jsx2("line", { x1: "17", y1: "7", x2: "22", y2: "7" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-    /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx2("polyline", { points: "14 2 14 8 20 8" })
   ] });
 }
 function AttachmentDisplay({ attachment }) {
@@ -1786,28 +2665,28 @@ function AttachmentDisplay({ attachment }) {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
   if (isImage) {
-    return /* @__PURE__ */ jsx("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-image", children: /* @__PURE__ */ jsx("img", { src: attachment.thumbnailUrl || attachment.url, alt: attachment.filename }) });
+    return /* @__PURE__ */ jsx2("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-image", children: /* @__PURE__ */ jsx2("img", { src: attachment.thumbnailUrl || attachment.url, alt: attachment.filename }) });
   }
   if (isAudio) {
-    return /* @__PURE__ */ jsxs("div", { class: "pp-attachment pp-attachment-audio", children: [
-      /* @__PURE__ */ jsx("audio", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx("source", { src: attachment.url, type: attachment.mimeType }) }),
-      /* @__PURE__ */ jsx("span", { class: "pp-attachment-name", children: attachment.filename })
+    return /* @__PURE__ */ jsxs2("div", { class: "pp-attachment pp-attachment-audio", children: [
+      /* @__PURE__ */ jsx2("audio", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx2("source", { src: attachment.url, type: attachment.mimeType }) }),
+      /* @__PURE__ */ jsx2("span", { class: "pp-attachment-name", children: attachment.filename })
     ] });
   }
   if (isVideo) {
-    return /* @__PURE__ */ jsx("div", { class: "pp-attachment pp-attachment-video", children: /* @__PURE__ */ jsx("video", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx("source", { src: attachment.url, type: attachment.mimeType }) }) });
+    return /* @__PURE__ */ jsx2("div", { class: "pp-attachment pp-attachment-video", children: /* @__PURE__ */ jsx2("video", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx2("source", { src: attachment.url, type: attachment.mimeType }) }) });
   }
-  return /* @__PURE__ */ jsxs("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-file", children: [
-    /* @__PURE__ */ jsx(FileIcon, { mimeType: attachment.mimeType }),
-    /* @__PURE__ */ jsxs("div", { class: "pp-attachment-info", children: [
-      /* @__PURE__ */ jsx("span", { class: "pp-attachment-name", children: attachment.filename }),
-      /* @__PURE__ */ jsx("span", { class: "pp-attachment-size", children: formatSize(attachment.size) })
+  return /* @__PURE__ */ jsxs2("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-file", children: [
+    /* @__PURE__ */ jsx2(FileIcon, { mimeType: attachment.mimeType }),
+    /* @__PURE__ */ jsxs2("div", { class: "pp-attachment-info", children: [
+      /* @__PURE__ */ jsx2("span", { class: "pp-attachment-name", children: attachment.filename }),
+      /* @__PURE__ */ jsx2("span", { class: "pp-attachment-size", children: formatSize(attachment.size) })
     ] })
   ] });
 }
 
 // src/version.ts
-var VERSION = "0.3.6";
+var VERSION = "0.3.7";
 
 // src/client.ts
 var PocketPingClient = class {
@@ -1867,7 +2746,8 @@ var PocketPingClient = class {
       visitorId: response.visitorId,
       operatorOnline: response.operatorOnline ?? false,
       messages: response.messages ?? [],
-      identity: response.identity || storedIdentity || void 0
+      identity: response.identity || storedIdentity || void 0,
+      preChatForm: response.preChatForm
     };
     if (response.operatorName) {
       this.config.operatorName = response.operatorName;
@@ -2223,6 +3103,36 @@ var PocketPingClient = class {
       }
     }
   }
+  /**
+   * Submit pre-chat form data (email and/or phone)
+   * @param data - Form data containing email and/or phone
+   */
+  async submitPreChat(data) {
+    if (!this.session) {
+      throw new Error("[PocketPing] Not connected");
+    }
+    if (!data.email && !data.phone) {
+      throw new Error("[PocketPing] Either email or phone is required");
+    }
+    try {
+      await this.fetch("/prechat", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session.sessionId,
+          email: data.email,
+          phone: data.phone,
+          phoneCountry: data.phoneCountry
+        })
+      });
+      if (this.session.preChatForm) {
+        this.session.preChatForm.completed = true;
+      }
+      this.emit("preChatCompleted", data);
+    } catch (err) {
+      console.error("[PocketPing] Failed to submit pre-chat form:", err);
+      throw err;
+    }
+  }
   /**
    * Reset the user identity and optionally start a new session
    * Call on user logout to clear user data
@@ -2872,6 +3782,12 @@ var PocketPingClient = class {
             this.session.messages.push(message);
             this.emit("message", message);
             this.config.onMessage?.(message);
+            if (message.sender !== "visitor" && !this.isOpen) {
+              const autoOpen = this.config.autoOpenOnMessage ?? true;
+              if (autoOpen) {
+                this.setOpen(true);
+              }
+            }
           }
         }
         if (message.sender !== "visitor") {
@@ -3030,6 +3946,12 @@ var PocketPingClient = class {
             this.session.messages.push(message);
             this.emit("message", message);
             this.config.onMessage?.(message);
+            if (message.sender !== "visitor" && !this.isOpen) {
+              const autoOpen = this.config.autoOpenOnMessage ?? true;
+              if (autoOpen) {
+                this.setOpen(true);
+              }
+            }
           }
         }
       } catch (err) {