@tp3/chat-widget 0.1.5 → 0.1.6

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 +8 -4
  2. package/dist/ChatWidget.mjs +8 -4
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +10 -4
package/dist/ChatWidget.js CHANGED
@@ -67,11 +67,16 @@ function ChatWidget({
67
67
  const typewriterQueue = (0, import_react.useRef)([]);
68
68
  const typewriterTimer = (0, import_react.useRef)(null);
69
69
  (0, import_react.useEffect)(() => {
70
- messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
70
+ if (messages.length > 1) {
71
+ messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
72
+ }
71
73
  }, [messages]);
72
74
  (0, import_react.useEffect)(() => {
73
75
  if (!loading && open) {
74
- inputRef.current?.focus();
76
+ const timer = setTimeout(() => {
77
+ inputRef.current?.focus();
78
+ }, 400);
79
+ return () => clearTimeout(timer);
75
80
  }
76
81
  }, [loading, open]);
77
82
  const TYPEWRITER_MS = 180;
@@ -265,12 +270,11 @@ function ChatWidget({
265
270
  width: chatWidth,
266
271
  maxWidth: "calc(100vw - 48px)",
267
272
  height: chatHeight,
268
- maxHeight: "calc(100vh - 48px)",
273
+ maxHeight: "calc(100dvh - 48px)",
269
274
  background: "var(--chat-primary-fg)",
270
275
  display: "flex",
271
276
  flexDirection: "column",
272
277
  borderRadius: 16,
273
- overflow: "hidden",
274
278
  boxShadow: "var(--chat-shadow-lg)"
275
279
  },
276
280
  children: [
package/dist/ChatWidget.mjs CHANGED
@@ -43,11 +43,16 @@ function ChatWidget({
43
43
  const typewriterQueue = useRef([]);
44
44
  const typewriterTimer = useRef(null);
45
45
  useEffect(() => {
46
- messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
46
+ if (messages.length > 1) {
47
+ messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
48
+ }
47
49
  }, [messages]);
48
50
  useEffect(() => {
49
51
  if (!loading && open) {
50
- inputRef.current?.focus();
52
+ const timer = setTimeout(() => {
53
+ inputRef.current?.focus();
54
+ }, 400);
55
+ return () => clearTimeout(timer);
51
56
  }
52
57
  }, [loading, open]);
53
58
  const TYPEWRITER_MS = 180;
@@ -241,12 +246,11 @@ function ChatWidget({
241
246
  width: chatWidth,
242
247
  maxWidth: "calc(100vw - 48px)",
243
248
  height: chatHeight,
244
- maxHeight: "calc(100vh - 48px)",
249
+ maxHeight: "calc(100dvh - 48px)",
245
250
  background: "var(--chat-primary-fg)",
246
251
  display: "flex",
247
252
  flexDirection: "column",
248
253
  borderRadius: 16,
249
- overflow: "hidden",
250
254
  boxShadow: "var(--chat-shadow-lg)"
251
255
  },
252
256
  children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tp3/chat-widget",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "main": "dist/ChatWidget.js",
5
5
  "module": "dist/ChatWidget.mjs",
6
6
  "types": "dist/ChatWidget.d.ts",
package/src/ChatWidget.tsx CHANGED
@@ -68,12 +68,19 @@ export default function ChatWidget({
68
68
  const typewriterTimer = useRef<ReturnType<typeof setInterval> | null>(null);
69
69
 
70
70
  useEffect(() => {
71
- messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
71
+ // Don't scroll on first render — wait for the open animation
72
+ if (messages.length > 1) {
73
+ messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
74
+ }
72
75
  }, [messages]);
73
76
 
74
77
  useEffect(() => {
75
78
  if (!loading && open) {
76
- inputRef.current?.focus();
79
+ // Delay focus until open animation finishes (350ms)
80
+ const timer = setTimeout(() => {
81
+ inputRef.current?.focus();
82
+ }, 400);
83
+ return () => clearTimeout(timer);
77
84
  }
78
85
  }, [loading, open]);
79
86
 
@@ -284,12 +291,11 @@ export default function ChatWidget({
284
291
  width: chatWidth,
285
292
  maxWidth: "calc(100vw - 48px)",
286
293
  height: chatHeight,
287
- maxHeight: "calc(100vh - 48px)",
294
+ maxHeight: "calc(100dvh - 48px)",
288
295
  background: "var(--chat-primary-fg)",
289
296
  display: "flex",
290
297
  flexDirection: "column",
291
298
  borderRadius: 16,
292
- overflow: "hidden",
293
299
  boxShadow: "var(--chat-shadow-lg)",
294
300
  }}
295
301
  >