@pocketping/widget 1.11.0 → 1.12.1

package/dist/index.cjs

@@ -218,24 +218,28 @@ function styles(options) {
       left: 20px;
     }
 
+    /* Mobile: fullscreen widget to prevent scroll issues */
     @media (max-width: 480px) {
       .pp-window {
-        width: calc(100vw - 20px);
-        height: auto;
-        min-height: 300px;
-        max-height: calc(100vh - 40px);
-        max-height: calc(100svh - 40px); /* svh = small viewport, excludes keyboard */
-        bottom: 10px;
-        right: 10px;
-        left: 10px;
-        border-radius: 12px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        max-height: 100dvh;
+        min-height: 100%;
+        min-height: 100dvh;
+        border-radius: 0;
+        overflow: hidden;
+        touch-action: none; /* Prevent page scroll behind widget */
       }
 
-      /* When keyboard is likely open (input focused), reduce height */
-      .pp-window:has(.pp-input:focus) {
-        max-height: calc(50vh - 20px);
-        max-height: calc(50svh - 20px);
-        bottom: 10px;
+      /* Prevent any horizontal scroll */
+      .pp-window * {
+        max-width: 100%;
       }
     }
 
@@ -319,6 +323,7 @@ function styles(options) {
     .pp-messages {
       flex: 1;
       overflow-y: auto;
+      overflow-x: hidden;
       padding: 16px 12px;
       display: flex;
       flex-direction: column;
@@ -330,6 +335,7 @@ function styles(options) {
       background-image: ${chatBgImage};
       background-size: ${chatBgSize};
       background-position: center;
+      touch-action: pan-y; /* Only allow vertical scrolling */
     }
 
     .pp-welcome {
@@ -368,8 +374,9 @@ function styles(options) {
       position: relative;
       display: flex;
       align-items: stretch;
-      overflow: visible;
-      touch-action: pan-y;
+      overflow: hidden; /* Prevent horizontal overflow */
+      touch-action: pan-y; /* Only vertical scroll */
+      max-width: 100%;
     }
 
     .pp-swipe-left {
@@ -504,11 +511,14 @@ function styles(options) {
     }
 
     /* 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-swipe-container + .pp-message-swipe-container {
+      margin-top: 4px;
+    }
+
+    /* More spacing when sender changes (visitor <-> operator/ai) */
+    .pp-swipe-left + .pp-swipe-right,
+    .pp-swipe-right + .pp-swipe-left {
+      margin-top: 16px;
     }
 
     .pp-message-content {
@@ -628,23 +638,27 @@ function styles(options) {
       padding: 8px 10px;
       gap: 8px;
       background: ${resolvedFooterColor};
-      align-items: center;
+      align-items: flex-end;
     }
 
     .pp-input {
       flex: 1;
       min-width: 0;
-      height: 42px;
-      line-height: 42px;
-      padding: 0 14px;
+      min-height: 42px;
+      max-height: 120px;
+      padding: 10px 14px;
       border: none;
       border-radius: 8px;
       background: ${isDark ? "#2a3942" : "#ffffff"};
       color: ${isDark ? "#e9edef" : "#111b21"};
       font-size: 15px;
+      line-height: 1.4;
       outline: none;
       box-sizing: border-box;
       margin: 0;
+      resize: none;
+      font-family: inherit;
+      overflow-y: auto;
     }
 
     .pp-input:focus {
@@ -2047,6 +2061,35 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setUnreadCount(0);
     }
   }, [isOpen]);
+  (0, import_hooks2.useEffect)(() => {
+    const isMobile = window.innerWidth <= 480;
+    if (isOpen && isMobile) {
+      const scrollY = window.scrollY;
+      const originalStyles = {
+        overflow: document.body.style.overflow,
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left,
+        right: document.body.style.right,
+        width: document.body.style.width
+      };
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = "0";
+      document.body.style.right = "0";
+      document.body.style.width = "100%";
+      return () => {
+        document.body.style.overflow = originalStyles.overflow;
+        document.body.style.position = originalStyles.position;
+        document.body.style.top = originalStyles.top;
+        document.body.style.left = originalStyles.left;
+        document.body.style.right = originalStyles.right;
+        document.body.style.width = originalStyles.width;
+        window.scrollTo(0, scrollY);
+      };
+    }
+  }, [isOpen]);
   (0, import_hooks2.useEffect)(() => {
     if (!isOpen && messages.length > 0) {
       const unread = messages.filter(
@@ -2103,6 +2146,9 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     setInputValue("");
     setPendingAttachments([]);
     setReplyingTo(null);
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto";
+    }
     try {
       await client2.sendMessage(content, attachmentIds, replyToId);
     } catch (err) {
@@ -2112,8 +2158,17 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const handleInputChange = (e) => {
     const target = e.target;
     setInputValue(target.value);
+    target.style.height = "auto";
+    target.style.height = Math.min(target.scrollHeight, 120) + "px";
     client2.sendTyping(true);
   };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      const form = e.target.closest("form");
+      if (form) form.requestSubmit();
+    }
+  };
   const handleFileSelect = async (e) => {
     const target = e.target;
     const files = target.files;
@@ -2233,9 +2288,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     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 (Math.abs(deltaY) > 10 || Math.abs(deltaX) < 15) {
+      if (swipedMessageId === message.id && swipeOffset !== 0) {
+        setSwipeOffset(0);
+        setSwipedMessageId(null);
+      }
+      return;
+    }
+    e.preventDefault();
     if (deltaX < 0) {
-      const offset = Math.max(deltaX, -100);
+      const offset = Math.max(deltaX, -80);
       setSwipeOffset(offset);
       setSwipedMessageId(message.id);
     }
@@ -2658,15 +2720,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "input",
+              "textarea",
               {
                 ref: inputRef,
-                type: "text",
                 class: "pp-input",
                 placeholder: config.placeholder ?? "Type a message...",
                 value: inputValue,
                 onInput: handleInputChange,
-                disabled: !isConnected
+                onKeyDown: handleKeyDown,
+                disabled: !isConnected,
+                rows: 1
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(

package/dist/index.js

@@ -177,24 +177,28 @@ function styles(options) {
       left: 20px;
     }
 
+    /* Mobile: fullscreen widget to prevent scroll issues */
     @media (max-width: 480px) {
       .pp-window {
-        width: calc(100vw - 20px);
-        height: auto;
-        min-height: 300px;
-        max-height: calc(100vh - 40px);
-        max-height: calc(100svh - 40px); /* svh = small viewport, excludes keyboard */
-        bottom: 10px;
-        right: 10px;
-        left: 10px;
-        border-radius: 12px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        max-height: 100dvh;
+        min-height: 100%;
+        min-height: 100dvh;
+        border-radius: 0;
+        overflow: hidden;
+        touch-action: none; /* Prevent page scroll behind widget */
       }
 
-      /* When keyboard is likely open (input focused), reduce height */
-      .pp-window:has(.pp-input:focus) {
-        max-height: calc(50vh - 20px);
-        max-height: calc(50svh - 20px);
-        bottom: 10px;
+      /* Prevent any horizontal scroll */
+      .pp-window * {
+        max-width: 100%;
       }
     }
 
@@ -278,6 +282,7 @@ function styles(options) {
     .pp-messages {
       flex: 1;
       overflow-y: auto;
+      overflow-x: hidden;
       padding: 16px 12px;
       display: flex;
       flex-direction: column;
@@ -289,6 +294,7 @@ function styles(options) {
       background-image: ${chatBgImage};
       background-size: ${chatBgSize};
       background-position: center;
+      touch-action: pan-y; /* Only allow vertical scrolling */
     }
 
     .pp-welcome {
@@ -327,8 +333,9 @@ function styles(options) {
       position: relative;
       display: flex;
       align-items: stretch;
-      overflow: visible;
-      touch-action: pan-y;
+      overflow: hidden; /* Prevent horizontal overflow */
+      touch-action: pan-y; /* Only vertical scroll */
+      max-width: 100%;
     }
 
     .pp-swipe-left {
@@ -463,11 +470,14 @@ function styles(options) {
     }
 
     /* 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-swipe-container + .pp-message-swipe-container {
+      margin-top: 4px;
+    }
+
+    /* More spacing when sender changes (visitor <-> operator/ai) */
+    .pp-swipe-left + .pp-swipe-right,
+    .pp-swipe-right + .pp-swipe-left {
+      margin-top: 16px;
     }
 
     .pp-message-content {
@@ -587,23 +597,27 @@ function styles(options) {
       padding: 8px 10px;
       gap: 8px;
       background: ${resolvedFooterColor};
-      align-items: center;
+      align-items: flex-end;
     }
 
     .pp-input {
       flex: 1;
       min-width: 0;
-      height: 42px;
-      line-height: 42px;
-      padding: 0 14px;
+      min-height: 42px;
+      max-height: 120px;
+      padding: 10px 14px;
       border: none;
       border-radius: 8px;
       background: ${isDark ? "#2a3942" : "#ffffff"};
       color: ${isDark ? "#e9edef" : "#111b21"};
       font-size: 15px;
+      line-height: 1.4;
       outline: none;
       box-sizing: border-box;
       margin: 0;
+      resize: none;
+      font-family: inherit;
+      overflow-y: auto;
     }
 
     .pp-input:focus {
@@ -2006,6 +2020,35 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setUnreadCount(0);
     }
   }, [isOpen]);
+  useEffect2(() => {
+    const isMobile = window.innerWidth <= 480;
+    if (isOpen && isMobile) {
+      const scrollY = window.scrollY;
+      const originalStyles = {
+        overflow: document.body.style.overflow,
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left,
+        right: document.body.style.right,
+        width: document.body.style.width
+      };
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = "0";
+      document.body.style.right = "0";
+      document.body.style.width = "100%";
+      return () => {
+        document.body.style.overflow = originalStyles.overflow;
+        document.body.style.position = originalStyles.position;
+        document.body.style.top = originalStyles.top;
+        document.body.style.left = originalStyles.left;
+        document.body.style.right = originalStyles.right;
+        document.body.style.width = originalStyles.width;
+        window.scrollTo(0, scrollY);
+      };
+    }
+  }, [isOpen]);
   useEffect2(() => {
     if (!isOpen && messages.length > 0) {
       const unread = messages.filter(
@@ -2062,6 +2105,9 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     setInputValue("");
     setPendingAttachments([]);
     setReplyingTo(null);
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto";
+    }
     try {
       await client2.sendMessage(content, attachmentIds, replyToId);
     } catch (err) {
@@ -2071,8 +2117,17 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const handleInputChange = (e) => {
     const target = e.target;
     setInputValue(target.value);
+    target.style.height = "auto";
+    target.style.height = Math.min(target.scrollHeight, 120) + "px";
     client2.sendTyping(true);
   };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      const form = e.target.closest("form");
+      if (form) form.requestSubmit();
+    }
+  };
   const handleFileSelect = async (e) => {
     const target = e.target;
     const files = target.files;
@@ -2192,9 +2247,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     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 (Math.abs(deltaY) > 10 || Math.abs(deltaX) < 15) {
+      if (swipedMessageId === message.id && swipeOffset !== 0) {
+        setSwipeOffset(0);
+        setSwipedMessageId(null);
+      }
+      return;
+    }
+    e.preventDefault();
     if (deltaX < 0) {
-      const offset = Math.max(deltaX, -100);
+      const offset = Math.max(deltaX, -80);
       setSwipeOffset(offset);
       setSwipedMessageId(message.id);
     }
@@ -2617,15 +2679,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
               }
             ),
             /* @__PURE__ */ jsx2(
-              "input",
+              "textarea",
               {
                 ref: inputRef,
-                type: "text",
                 class: "pp-input",
                 placeholder: config.placeholder ?? "Type a message...",
                 value: inputValue,
                 onInput: handleInputChange,
-                disabled: !isConnected
+                onKeyDown: handleKeyDown,
+                disabled: !isConnected,
+                rows: 1
               }
             ),
             /* @__PURE__ */ jsx2(