@tp3/chat-widget 0.1.5 → 0.1.7

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 +27 -23
  2. package/dist/ChatWidget.mjs +27 -23
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +31 -25
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;
@@ -227,15 +232,15 @@ function ChatWidget({
227
232
  width: 56,
228
233
  height: 56,
229
234
  borderRadius: 16,
230
- background: "var(--chat-primary)",
231
- color: "var(--chat-primary-fg)",
235
+ background: "var(--chat-primary, #6366F1)",
236
+ color: "var(--chat-primary-fg, #fff)",
232
237
  border: "none",
233
238
  cursor: "pointer",
234
239
  display: "flex",
235
240
  alignItems: "center",
236
241
  justifyContent: "center",
237
242
  flexShrink: 0,
238
- boxShadow: "var(--chat-shadow)"
243
+ boxShadow: "var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12))"
239
244
  },
240
245
  "aria-label": "Abrir chat",
241
246
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -265,21 +270,20 @@ function ChatWidget({
265
270
  width: chatWidth,
266
271
  maxWidth: "calc(100vw - 48px)",
267
272
  height: chatHeight,
268
- maxHeight: "calc(100vh - 48px)",
269
- background: "var(--chat-primary-fg)",
273
+ maxHeight: "calc(100dvh - 48px)",
274
+ background: "var(--chat-primary-fg, #fff)",
270
275
  display: "flex",
271
276
  flexDirection: "column",
272
277
  borderRadius: 16,
273
- overflow: "hidden",
274
- boxShadow: "var(--chat-shadow-lg)"
278
+ boxShadow: "var(--chat-shadow-lg, 0 12px 48px rgba(0,0,0,.18))"
275
279
  },
276
280
  children: [
277
281
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
278
282
  "div",
279
283
  {
280
284
  style: {
281
- background: "var(--chat-primary)",
282
- color: "var(--chat-primary-fg)",
285
+ background: "var(--chat-primary, #6366F1)",
286
+ color: "var(--chat-primary-fg, #fff)",
283
287
  padding: "14px 20px",
284
288
  display: "flex",
285
289
  alignItems: "center",
@@ -292,7 +296,7 @@ function ChatWidget({
292
296
  "div",
293
297
  {
294
298
  style: {
295
- fontFamily: "var(--chat-font-heading)",
299
+ fontFamily: "var(--chat-font-heading, 'Outfit', sans-serif)",
296
300
  fontWeight: 600,
297
301
  fontSize: 16
298
302
  },
@@ -316,9 +320,9 @@ function ChatWidget({
316
320
  width: 32,
317
321
  height: 32,
318
322
  borderRadius: 12,
319
- background: "var(--chat-close-btn-bg)",
323
+ background: "var(--chat-close-btn-bg, rgba(255,255,255,.1))",
320
324
  border: "none",
321
- color: "var(--chat-primary-fg)",
325
+ color: "var(--chat-primary-fg, #fff)",
322
326
  cursor: "pointer"
323
327
  },
324
328
  "aria-label": "Cerrar chat",
@@ -338,7 +342,7 @@ function ChatWidget({
338
342
  display: "flex",
339
343
  flexDirection: "column",
340
344
  gap: 10,
341
- fontFamily: "var(--chat-font-body)"
345
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
342
346
  },
343
347
  children: [
344
348
  messages.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -352,8 +356,8 @@ function ChatWidget({
352
356
  fontSize: 14,
353
357
  lineHeight: 1.45,
354
358
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
355
- background: m.role === "user" ? "var(--chat-primary)" : "var(--chat-bot-bubble)",
356
- color: m.role === "user" ? "var(--chat-primary-fg)" : "var(--chat-bot-text)",
359
+ background: m.role === "user" ? "var(--chat-primary, #6366F1)" : "var(--chat-bot-bubble, #F4F4F5)",
360
+ color: m.role === "user" ? "var(--chat-primary-fg, #fff)" : "var(--chat-bot-text, #18181B)",
357
361
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
358
362
  borderBottomLeftRadius: m.role === "user" ? 16 : 4
359
363
  },
@@ -374,7 +378,7 @@ function ChatWidget({
374
378
  className: "typing-indicator",
375
379
  style: {
376
380
  alignSelf: "flex-start",
377
- background: "var(--chat-bot-bubble)",
381
+ background: "var(--chat-bot-bubble, #F4F4F5)",
378
382
  borderRadius: 16,
379
383
  borderBottomLeftRadius: 4
380
384
  },
@@ -400,7 +404,7 @@ function ChatWidget({
400
404
  display: "flex",
401
405
  gap: 8,
402
406
  padding: "12px 16px 16px",
403
- borderTop: "1px solid var(--chat-border)",
407
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
404
408
  flexShrink: 0
405
409
  },
406
410
  children: [
@@ -415,11 +419,11 @@ function ChatWidget({
415
419
  style: {
416
420
  flex: 1,
417
421
  padding: "10px 14px",
418
- border: "1px solid var(--chat-border)",
422
+ border: "1px solid var(--chat-border, #E4E4E7)",
419
423
  borderRadius: 12,
420
424
  fontSize: 14,
421
425
  outline: "none",
422
- fontFamily: "var(--chat-font-body)"
426
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
423
427
  }
424
428
  }
425
429
  ),
@@ -432,8 +436,8 @@ function ChatWidget({
432
436
  width: 40,
433
437
  height: 40,
434
438
  borderRadius: 12,
435
- background: "var(--chat-primary)",
436
- color: "var(--chat-primary-fg)",
439
+ background: "var(--chat-primary, #6366F1)",
440
+ color: "var(--chat-primary-fg, #fff)",
437
441
  border: "none",
438
442
  cursor: "pointer",
439
443
  display: "flex",
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;
@@ -203,15 +208,15 @@ function ChatWidget({
203
208
  width: 56,
204
209
  height: 56,
205
210
  borderRadius: 16,
206
- background: "var(--chat-primary)",
207
- color: "var(--chat-primary-fg)",
211
+ background: "var(--chat-primary, #6366F1)",
212
+ color: "var(--chat-primary-fg, #fff)",
208
213
  border: "none",
209
214
  cursor: "pointer",
210
215
  display: "flex",
211
216
  alignItems: "center",
212
217
  justifyContent: "center",
213
218
  flexShrink: 0,
214
- boxShadow: "var(--chat-shadow)"
219
+ boxShadow: "var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12))"
215
220
  },
216
221
  "aria-label": "Abrir chat",
217
222
  children: /* @__PURE__ */ jsx(
@@ -241,21 +246,20 @@ function ChatWidget({
241
246
  width: chatWidth,
242
247
  maxWidth: "calc(100vw - 48px)",
243
248
  height: chatHeight,
244
- maxHeight: "calc(100vh - 48px)",
245
- background: "var(--chat-primary-fg)",
249
+ maxHeight: "calc(100dvh - 48px)",
250
+ background: "var(--chat-primary-fg, #fff)",
246
251
  display: "flex",
247
252
  flexDirection: "column",
248
253
  borderRadius: 16,
249
- overflow: "hidden",
250
- boxShadow: "var(--chat-shadow-lg)"
254
+ boxShadow: "var(--chat-shadow-lg, 0 12px 48px rgba(0,0,0,.18))"
251
255
  },
252
256
  children: [
253
257
  /* @__PURE__ */ jsxs(
254
258
  "div",
255
259
  {
256
260
  style: {
257
- background: "var(--chat-primary)",
258
- color: "var(--chat-primary-fg)",
261
+ background: "var(--chat-primary, #6366F1)",
262
+ color: "var(--chat-primary-fg, #fff)",
259
263
  padding: "14px 20px",
260
264
  display: "flex",
261
265
  alignItems: "center",
@@ -268,7 +272,7 @@ function ChatWidget({
268
272
  "div",
269
273
  {
270
274
  style: {
271
- fontFamily: "var(--chat-font-heading)",
275
+ fontFamily: "var(--chat-font-heading, 'Outfit', sans-serif)",
272
276
  fontWeight: 600,
273
277
  fontSize: 16
274
278
  },
@@ -292,9 +296,9 @@ function ChatWidget({
292
296
  width: 32,
293
297
  height: 32,
294
298
  borderRadius: 12,
295
- background: "var(--chat-close-btn-bg)",
299
+ background: "var(--chat-close-btn-bg, rgba(255,255,255,.1))",
296
300
  border: "none",
297
- color: "var(--chat-primary-fg)",
301
+ color: "var(--chat-primary-fg, #fff)",
298
302
  cursor: "pointer"
299
303
  },
300
304
  "aria-label": "Cerrar chat",
@@ -314,7 +318,7 @@ function ChatWidget({
314
318
  display: "flex",
315
319
  flexDirection: "column",
316
320
  gap: 10,
317
- fontFamily: "var(--chat-font-body)"
321
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
318
322
  },
319
323
  children: [
320
324
  messages.map((m, i) => /* @__PURE__ */ jsx(
@@ -328,8 +332,8 @@ function ChatWidget({
328
332
  fontSize: 14,
329
333
  lineHeight: 1.45,
330
334
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
331
- background: m.role === "user" ? "var(--chat-primary)" : "var(--chat-bot-bubble)",
332
- color: m.role === "user" ? "var(--chat-primary-fg)" : "var(--chat-bot-text)",
335
+ background: m.role === "user" ? "var(--chat-primary, #6366F1)" : "var(--chat-bot-bubble, #F4F4F5)",
336
+ color: m.role === "user" ? "var(--chat-primary-fg, #fff)" : "var(--chat-bot-text, #18181B)",
333
337
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
334
338
  borderBottomLeftRadius: m.role === "user" ? 16 : 4
335
339
  },
@@ -350,7 +354,7 @@ function ChatWidget({
350
354
  className: "typing-indicator",
351
355
  style: {
352
356
  alignSelf: "flex-start",
353
- background: "var(--chat-bot-bubble)",
357
+ background: "var(--chat-bot-bubble, #F4F4F5)",
354
358
  borderRadius: 16,
355
359
  borderBottomLeftRadius: 4
356
360
  },
@@ -376,7 +380,7 @@ function ChatWidget({
376
380
  display: "flex",
377
381
  gap: 8,
378
382
  padding: "12px 16px 16px",
379
- borderTop: "1px solid var(--chat-border)",
383
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
380
384
  flexShrink: 0
381
385
  },
382
386
  children: [
@@ -391,11 +395,11 @@ function ChatWidget({
391
395
  style: {
392
396
  flex: 1,
393
397
  padding: "10px 14px",
394
- border: "1px solid var(--chat-border)",
398
+ border: "1px solid var(--chat-border, #E4E4E7)",
395
399
  borderRadius: 12,
396
400
  fontSize: 14,
397
401
  outline: "none",
398
- fontFamily: "var(--chat-font-body)"
402
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
399
403
  }
400
404
  }
401
405
  ),
@@ -408,8 +412,8 @@ function ChatWidget({
408
412
  width: 40,
409
413
  height: 40,
410
414
  borderRadius: 12,
411
- background: "var(--chat-primary)",
412
- color: "var(--chat-primary-fg)",
415
+ background: "var(--chat-primary, #6366F1)",
416
+ color: "var(--chat-primary-fg, #fff)",
413
417
  border: "none",
414
418
  cursor: "pointer",
415
419
  display: "flex",
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.7",
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
 
@@ -247,15 +254,15 @@ export default function ChatWidget({
247
254
  width: 56,
248
255
  height: 56,
249
256
  borderRadius: 16,
250
- background: "var(--chat-primary)",
251
- color: "var(--chat-primary-fg)",
257
+ background: "var(--chat-primary, #6366F1)",
258
+ color: "var(--chat-primary-fg, #fff)",
252
259
  border: "none",
253
260
  cursor: "pointer",
254
261
  display: "flex",
255
262
  alignItems: "center",
256
263
  justifyContent: "center",
257
264
  flexShrink: 0,
258
- boxShadow: "var(--chat-shadow)",
265
+ boxShadow: "var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12))",
259
266
  }}
260
267
  aria-label="Abrir chat"
261
268
  >
@@ -284,20 +291,19 @@ export default function ChatWidget({
284
291
  width: chatWidth,
285
292
  maxWidth: "calc(100vw - 48px)",
286
293
  height: chatHeight,
287
- maxHeight: "calc(100vh - 48px)",
288
- background: "var(--chat-primary-fg)",
294
+ maxHeight: "calc(100dvh - 48px)",
295
+ background: "var(--chat-primary-fg, #fff)",
289
296
  display: "flex",
290
297
  flexDirection: "column",
291
298
  borderRadius: 16,
292
- overflow: "hidden",
293
- boxShadow: "var(--chat-shadow-lg)",
299
+ boxShadow: "var(--chat-shadow-lg, 0 12px 48px rgba(0,0,0,.18))",
294
300
  }}
295
301
  >
296
302
  {/* Header */}
297
303
  <div
298
304
  style={{
299
- background: "var(--chat-primary)",
300
- color: "var(--chat-primary-fg)",
305
+ background: "var(--chat-primary, #6366F1)",
306
+ color: "var(--chat-primary-fg, #fff)",
301
307
  padding: "14px 20px",
302
308
  display: "flex",
303
309
  alignItems: "center",
@@ -308,7 +314,7 @@ export default function ChatWidget({
308
314
  <div>
309
315
  <div
310
316
  style={{
311
- fontFamily: "var(--chat-font-heading)",
317
+ fontFamily: "var(--chat-font-heading, 'Outfit', sans-serif)",
312
318
  fontWeight: 600,
313
319
  fontSize: 16,
314
320
  }}
@@ -332,9 +338,9 @@ export default function ChatWidget({
332
338
  width: 32,
333
339
  height: 32,
334
340
  borderRadius: 12,
335
- background: "var(--chat-close-btn-bg)",
341
+ background: "var(--chat-close-btn-bg, rgba(255,255,255,.1))",
336
342
  border: "none",
337
- color: "var(--chat-primary-fg)",
343
+ color: "var(--chat-primary-fg, #fff)",
338
344
  cursor: "pointer",
339
345
  }}
340
346
  aria-label="Cerrar chat"
@@ -352,7 +358,7 @@ export default function ChatWidget({
352
358
  display: "flex",
353
359
  flexDirection: "column",
354
360
  gap: 10,
355
- fontFamily: "var(--chat-font-body)",
361
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)",
356
362
  }}
357
363
  >
358
364
  {messages.map((m, i) => (
@@ -368,12 +374,12 @@ export default function ChatWidget({
368
374
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
369
375
  background:
370
376
  m.role === "user"
371
- ? "var(--chat-primary)"
372
- : "var(--chat-bot-bubble)",
377
+ ? "var(--chat-primary, #6366F1)"
378
+ : "var(--chat-bot-bubble, #F4F4F5)",
373
379
  color:
374
380
  m.role === "user"
375
- ? "var(--chat-primary-fg)"
376
- : "var(--chat-bot-text)",
381
+ ? "var(--chat-primary-fg, #fff)"
382
+ : "var(--chat-bot-text, #18181B)",
377
383
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
378
384
  borderBottomLeftRadius: m.role === "user" ? 16 : 4,
379
385
  }}
@@ -394,7 +400,7 @@ export default function ChatWidget({
394
400
  className="typing-indicator"
395
401
  style={{
396
402
  alignSelf: "flex-start",
397
- background: "var(--chat-bot-bubble)",
403
+ background: "var(--chat-bot-bubble, #F4F4F5)",
398
404
  borderRadius: 16,
399
405
  borderBottomLeftRadius: 4,
400
406
  }}
@@ -417,7 +423,7 @@ export default function ChatWidget({
417
423
  display: "flex",
418
424
  gap: 8,
419
425
  padding: "12px 16px 16px",
420
- borderTop: "1px solid var(--chat-border)",
426
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
421
427
  flexShrink: 0,
422
428
  }}
423
429
  >
@@ -430,11 +436,11 @@ export default function ChatWidget({
430
436
  style={{
431
437
  flex: 1,
432
438
  padding: "10px 14px",
433
- border: "1px solid var(--chat-border)",
439
+ border: "1px solid var(--chat-border, #E4E4E7)",
434
440
  borderRadius: 12,
435
441
  fontSize: 14,
436
442
  outline: "none",
437
- fontFamily: "var(--chat-font-body)",
443
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)",
438
444
  }}
439
445
  />
440
446
  <button
@@ -444,8 +450,8 @@ export default function ChatWidget({
444
450
  width: 40,
445
451
  height: 40,
446
452
  borderRadius: 12,
447
- background: "var(--chat-primary)",
448
- color: "var(--chat-primary-fg)",
453
+ background: "var(--chat-primary, #6366F1)",
454
+ color: "var(--chat-primary-fg, #fff)",
449
455
  border: "none",
450
456
  cursor: "pointer",
451
457
  display: "flex",