@tp3/chat-widget 0.1.7 → 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 +23 -0
  2. package/dist/ChatWidget.mjs +23 -0
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +25 -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,9 +359,11 @@ 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",
366
+ justifyContent: "flex-end",
344
367
  gap: 10,
345
368
  fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
346
369
  },
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,9 +335,11 @@ 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",
342
+ justifyContent: "flex-end",
320
343
  gap: 10,
321
344
  fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
322
345
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tp3/chat-widget",
3
- "version": "0.1.7",
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,9 +377,11 @@ 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",
384
+ justifyContent: "flex-end",
360
385
  gap: 10,
361
386
  fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)",
362
387
  }}