@tp3/chat-widget 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/ChatWidget.js +22 -0
  2. package/dist/ChatWidget.mjs +22 -0
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +24 -0
package/dist/ChatWidget.js CHANGED
@@ -66,6 +66,27 @@ function ChatWidget({
66
66
  const inputRef = (0, import_react.useRef)(null);
67
67
  const typewriterQueue = (0, import_react.useRef)([]);
68
68
  const typewriterTimer = (0, import_react.useRef)(null);
69
+ (0, import_react.useEffect)(() => {
70
+ if (open && !closing) {
71
+ const scrollY = window.scrollY;
72
+ document.body.style.position = "fixed";
73
+ document.body.style.top = `-${scrollY}px`;
74
+ document.body.style.width = "100%";
75
+ } else if (!open) {
76
+ const top = Math.abs(parseInt(document.body.style.top || "0", 10));
77
+ document.body.style.position = "";
78
+ document.body.style.top = "";
79
+ document.body.style.width = "";
80
+ window.scrollTo(0, top);
81
+ }
82
+ return () => {
83
+ const top = Math.abs(parseInt(document.body.style.top || "0", 10));
84
+ document.body.style.position = "";
85
+ document.body.style.top = "";
86
+ document.body.style.width = "";
87
+ if (open) window.scrollTo(0, top);
88
+ };
89
+ }, [open, closing]);
69
90
  (0, import_react.useEffect)(() => {
70
91
  if (messages.length > 1) {
71
92
  messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
@@ -338,6 +359,7 @@ function ChatWidget({
338
359
  style: {
339
360
  flex: 1,
340
361
  overflowY: "auto",
362
+ overscrollBehavior: "contain",
341
363
  padding: "12px 16px",
342
364
  display: "flex",
343
365
  flexDirection: "column",
package/dist/ChatWidget.mjs CHANGED
@@ -42,6 +42,27 @@ function ChatWidget({
42
42
  const inputRef = useRef(null);
43
43
  const typewriterQueue = useRef([]);
44
44
  const typewriterTimer = useRef(null);
45
+ useEffect(() => {
46
+ if (open && !closing) {
47
+ const scrollY = window.scrollY;
48
+ document.body.style.position = "fixed";
49
+ document.body.style.top = `-${scrollY}px`;
50
+ document.body.style.width = "100%";
51
+ } else if (!open) {
52
+ const top = Math.abs(parseInt(document.body.style.top || "0", 10));
53
+ document.body.style.position = "";
54
+ document.body.style.top = "";
55
+ document.body.style.width = "";
56
+ window.scrollTo(0, top);
57
+ }
58
+ return () => {
59
+ const top = Math.abs(parseInt(document.body.style.top || "0", 10));
60
+ document.body.style.position = "";
61
+ document.body.style.top = "";
62
+ document.body.style.width = "";
63
+ if (open) window.scrollTo(0, top);
64
+ };
65
+ }, [open, closing]);
45
66
  useEffect(() => {
46
67
  if (messages.length > 1) {
47
68
  messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
@@ -314,6 +335,7 @@ function ChatWidget({
314
335
  style: {
315
336
  flex: 1,
316
337
  overflowY: "auto",
338
+ overscrollBehavior: "contain",
317
339
  padding: "12px 16px",
318
340
  display: "flex",
319
341
  flexDirection: "column",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tp3/chat-widget",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "main": "dist/ChatWidget.js",
5
5
  "module": "dist/ChatWidget.mjs",
6
6
  "types": "dist/ChatWidget.d.ts",
package/src/ChatWidget.tsx CHANGED
@@ -67,6 +67,29 @@ export default function ChatWidget({
67
67
  const typewriterQueue = useRef<string[]>([]);
68
68
  const typewriterTimer = useRef<ReturnType<typeof setInterval> | null>(null);
69
69
 
70
+ // Lock body scroll when chat is open (no overflow:hidden to avoid keyboard issues)
71
+ useEffect(() => {
72
+ if (open && !closing) {
73
+ const scrollY = window.scrollY;
74
+ document.body.style.position = "fixed";
75
+ document.body.style.top = `-${scrollY}px`;
76
+ document.body.style.width = "100%";
77
+ } else if (!open) {
78
+ const top = Math.abs(parseInt(document.body.style.top || "0", 10));
79
+ document.body.style.position = "";
80
+ document.body.style.top = "";
81
+ document.body.style.width = "";
82
+ window.scrollTo(0, top);
83
+ }
84
+ return () => {
85
+ const top = Math.abs(parseInt(document.body.style.top || "0", 10));
86
+ document.body.style.position = "";
87
+ document.body.style.top = "";
88
+ document.body.style.width = "";
89
+ if (open) window.scrollTo(0, top);
90
+ };
91
+ }, [open, closing]);
92
+
70
93
  useEffect(() => {
71
94
  // Don't scroll on first render — wait for the open animation
72
95
  if (messages.length > 1) {
@@ -354,6 +377,7 @@ export default function ChatWidget({
354
377
  style={{
355
378
  flex: 1,
356
379
  overflowY: "auto",
380
+ overscrollBehavior: "contain",
357
381
  padding: "12px 16px",
358
382
  display: "flex",
359
383
  flexDirection: "column",