@tp3/chat-widget 0.1.9 → 0.1.10

package/dist/ChatWidget.js

@@ -64,6 +64,7 @@ function ChatWidget({
   const wsRef = (0, import_react.useRef)(null);
   const messagesEnd = (0, import_react.useRef)(null);
   const inputRef = (0, import_react.useRef)(null);
+  const chatWindowRef = (0, import_react.useRef)(null);
   const typewriterQueue = (0, import_react.useRef)([]);
   const typewriterTimer = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
@@ -87,6 +88,21 @@ function ChatWidget({
       if (open) window.scrollTo(0, top);
     };
   }, [open, closing]);
+  (0, import_react.useEffect)(() => {
+    const el = chatWindowRef.current;
+    if (!el || !open) return;
+    function blockIfOutsideMessages(e) {
+      const target = e.target;
+      if (target.closest("[data-chat-messages]")) return;
+      e.preventDefault();
+    }
+    el.addEventListener("wheel", blockIfOutsideMessages, { passive: false });
+    el.addEventListener("touchmove", blockIfOutsideMessages, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", blockIfOutsideMessages);
+      el.removeEventListener("touchmove", blockIfOutsideMessages);
+    };
+  }, [open]);
   (0, import_react.useEffect)(() => {
     if (messages.length > 1) {
       messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
@@ -282,6 +298,7 @@ function ChatWidget({
     open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
+        ref: chatWindowRef,
         className: closing ? "chat-window-out" : "chat-window",
         style: {
           position: "fixed",
@@ -292,6 +309,7 @@ function ChatWidget({
           maxWidth: "calc(100vw - 48px)",
           height: chatHeight,
           maxHeight: "calc(100dvh - 48px)",
+          overscrollBehavior: "contain",
           background: "var(--chat-primary-fg, #fff)",
           display: "flex",
           flexDirection: "column",
@@ -356,6 +374,7 @@ function ChatWidget({
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "div",
             {
+              "data-chat-messages": true,
               style: {
                 flex: 1,
                 overflowY: "auto",

package/dist/ChatWidget.mjs

@@ -40,6 +40,7 @@ function ChatWidget({
   const wsRef = useRef(null);
   const messagesEnd = useRef(null);
   const inputRef = useRef(null);
+  const chatWindowRef = useRef(null);
   const typewriterQueue = useRef([]);
   const typewriterTimer = useRef(null);
   useEffect(() => {
@@ -63,6 +64,21 @@ function ChatWidget({
       if (open) window.scrollTo(0, top);
     };
   }, [open, closing]);
+  useEffect(() => {
+    const el = chatWindowRef.current;
+    if (!el || !open) return;
+    function blockIfOutsideMessages(e) {
+      const target = e.target;
+      if (target.closest("[data-chat-messages]")) return;
+      e.preventDefault();
+    }
+    el.addEventListener("wheel", blockIfOutsideMessages, { passive: false });
+    el.addEventListener("touchmove", blockIfOutsideMessages, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", blockIfOutsideMessages);
+      el.removeEventListener("touchmove", blockIfOutsideMessages);
+    };
+  }, [open]);
   useEffect(() => {
     if (messages.length > 1) {
       messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
@@ -258,6 +274,7 @@ function ChatWidget({
     open && /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: chatWindowRef,
         className: closing ? "chat-window-out" : "chat-window",
         style: {
           position: "fixed",
@@ -268,6 +285,7 @@ function ChatWidget({
           maxWidth: "calc(100vw - 48px)",
           height: chatHeight,
           maxHeight: "calc(100dvh - 48px)",
+          overscrollBehavior: "contain",
           background: "var(--chat-primary-fg, #fff)",
           display: "flex",
           flexDirection: "column",
@@ -332,6 +350,7 @@ function ChatWidget({
           /* @__PURE__ */ jsxs(
             "div",
             {
+              "data-chat-messages": true,
               style: {
                 flex: 1,
                 overflowY: "auto",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp3/chat-widget",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "main": "dist/ChatWidget.js",
   "module": "dist/ChatWidget.mjs",
   "types": "dist/ChatWidget.d.ts",

package/src/ChatWidget.tsx

@@ -64,10 +64,13 @@ export default function ChatWidget({
   const wsRef = useRef<WebSocket | null>(null);
   const messagesEnd = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const chatWindowRef = useRef<HTMLDivElement>(null);
   const typewriterQueue = useRef<string[]>([]);
   const typewriterTimer = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  // Lock body scroll when chat is open (no overflow:hidden to avoid keyboard issues)
+  // Lock body scroll when chat is open. Uses two mechanisms:
+  // 1. position:fixed on body (mobile keyboard safe)
+  // 2. wheel/touch listeners on the chat window to prevent event leakage
   useEffect(() => {
     if (open && !closing) {
       const scrollY = window.scrollY;
@@ -90,6 +93,28 @@ export default function ChatWidget({
     };
   }, [open, closing]);
 
+  // Prevent events on the chat window from scrolling the page behind.
+  // Only blocks events targeting the window itself, not the scrollable messages area.
+  useEffect(() => {
+    const el = chatWindowRef.current;
+    if (!el || !open) return;
+
+    function blockIfOutsideMessages(e: WheelEvent | TouchEvent) {
+      const target = e.target as HTMLElement;
+      // Allow scroll inside the messages container
+      if (target.closest('[data-chat-messages]')) return;
+      e.preventDefault();
+    }
+
+    el.addEventListener("wheel", blockIfOutsideMessages, { passive: false });
+    el.addEventListener("touchmove", blockIfOutsideMessages, { passive: false });
+
+    return () => {
+      el.removeEventListener("wheel", blockIfOutsideMessages);
+      el.removeEventListener("touchmove", blockIfOutsideMessages);
+    };
+  }, [open]);
+
   useEffect(() => {
     // Don't scroll on first render — wait for the open animation
     if (messages.length > 1) {
@@ -305,6 +330,7 @@ export default function ChatWidget({
 
       {open && (
         <div
+          ref={chatWindowRef}
           className={closing ? "chat-window-out" : "chat-window"}
           style={{
             position: "fixed",
@@ -315,6 +341,7 @@ export default function ChatWidget({
             maxWidth: "calc(100vw - 48px)",
             height: chatHeight,
             maxHeight: "calc(100dvh - 48px)",
+            overscrollBehavior: "contain",
             background: "var(--chat-primary-fg, #fff)",
             display: "flex",
             flexDirection: "column",
@@ -374,6 +401,7 @@ export default function ChatWidget({
 
           {/* Messages */}
           <div
+            data-chat-messages
             style={{
               flex: 1,
               overflowY: "auto",